React函数组件特定场景执行useState后如何调用回调函数

你好:) 我近期正在开展React类组件到函数组件的迁移工作，仅有2天时间验证迁移方案是否可完美落地。这是我第一次接触函数组件与Hook，开发过程中遇到了不少问题。
其中一个难点是：如何迁移仅在特定场景下执行useState后调用的回调函数逻辑。
我了解useEffect可实现componentDidMount、componentDidUpdate等生命周期逻辑，也可处理回调类需求。
但我发现无法精准控制useEffect在我需要的时机触发。
以下是类组件示例代码：

我知道存在无需回调方法即可打印'changed'的规范实现方式，但我编写该示例仅为展示需要放置回调函数的位置。

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      aaa: 200,
      bbb: 200,
      ccc: "black"
    };
  }

  handleClick = (target, e) => {
    if (target === "div") {
      this.setState({ aaa: 300, bbb: 300, ccc: "yellow" }, () => {
        // 目标逻辑：仅在特定场景下执行回调
        // 不希望每次状态变化都修改innerText
        document.getElementById("box").innerText = "changed!";
      });
    } else {
      this.setState({ aaa: 300, bbb: 300, ccc: "pink" });
    }
  };

  render() {
    const { aaa, bbb, ccc } = this.state;

    return (
      <div style={{ textAlign: "center" }}>
        <div
          id="box"
          onClick={this.handleClick.bind(this, "div")}
          style={{
            display: "inline-block",
            marginBottom: "30px",
            width: aaa,
            height: bbb,
            backgroundColor: ccc
          }}
        >
          click it!
        </div>
        <br />
        <button onClick={this.handleClick.bind(this, "button")}>
          click it!
        </button>
      </div>
    );
  }
}

export default App;

类组件setState的第二个回调参数，触发时机是状态更新完成、组件完成重渲染之后，要实现仅特定场景触发，不要使用依赖具体state值的useEffect——这类写法很容易在其他逻辑修改同一个state时误触发回调。
最适配短周期迁移、改造成本最低的方案是用useRef做触发标记，配合无依赖的useEffect精准控制执行时机：

• 新增一个ref变量存储「本次重渲染完成后是否需要执行回调」的布尔标记，默认值为false
• 仅在你需要触发回调的setState执行前，把ref标记设为true
• 写一个无依赖项的useEffect，每次重渲染完成后检查ref标记：如果为true就执行回调逻辑，执行完立刻把标记重置为false，避免后续渲染误触发

对应迁移后的函数组件代码如下：

import { useState, useRef, useEffect } from 'react';

const App = () => {
  const [aaa, setAaa] = useState(200);
  const [bbb, setBbb] = useState(200);
  const [ccc, setCcc] = useState('black');
  // 回调触发标记
  const needRunCallback = useRef(false);

  const handleClick = (target, e) => {
    if (target === "div") {
      // 需要执行回调的场景，先打标记
      needRunCallback.current = true;
      setAaa(300);
      setBbb(300);
      setCcc("yellow");
    } else {
      // 不需要执行回调的场景，不修改标记
      setAaa(300);
      setBbb(300);
      setCcc("pink");
    }
  };

  useEffect(() => {
    if (needRunCallback.current) {
      // 放置原setState回调中的逻辑
      document.getElementById("box").innerText = "changed!";
      // 执行后重置标记
      needRunCallback.current = false;
    }
  });

  return (
    <div style={{ textAlign: "center" }}>
      <div
        id="box"
        onClick={(e) => handleClick("div", e)}
        style={{
          display: "inline-block",
          marginBottom: "30px",
          width: aaa,
          height: bbb,
          backgroundColor: ccc
        }}
      >
        click it!
      </div>
      <br />
      <button onClick={(e) => handleClick("button", e)}>
        click it!
      </button>
    </div>
  );
};

export default App;

注意事项 #

• React 18及以上版本默认开启自动批处理，哪怕分开写多个setState，同一轮事件里的更新只会触发一次重渲染，上述方案不会重复执行回调
• 如果你的回调逻辑不依赖更新后的state、也不需要操作重渲染后的DOM，可以直接把逻辑写在setState语句后面，不需要额外用useEffect，这类场景占比极低
• 不要为了适配回调强行把多个独立state合并成单个对象，会额外增加迁移改造成本，上述ref标记方案完全可以覆盖所有类组件setState回调的迁移场景

内容的提问来源于stack exchange，提问作者loveloper.dev