为何useEffect钩子的清理函数仅使用先前状态？

核心原因是闭包特性。每次组件渲染时，React会生成一个全新的函数作用域，useEffect的回调函数（包括它返回的清理函数）会捕获当前作用域里的状态和变量值。当状态更新触发重新渲染后，新的渲染会创建新的作用域和新的useEffect回调，但上一次渲染时生成的清理函数，依然绑定在上一次的作用域上，它能访问到的状态自然是上一次渲染时的值。

拿你提供的TestComponent组件举例，实际执行流程是这样的：

• 第一次渲染：incrementTrigger值为1，useEffect执行，打印Component Updated 1，此时返回的清理函数捕获的incrementTrigger是1。
• 点击按钮触发状态更新，incrementTrigger变为2，组件开始重新渲染。
• 重新渲染完成后，React会先执行上一次渲染遗留的清理函数，此时它捕获的还是上一次的状态值1，所以打印Clean Up - 1。
• 接着执行本次渲染的useEffect回调，打印Component Updated 2，这次返回的清理函数会捕获当前的状态值2，等下一次状态更新时就会用到这个值。

对应的组件代码：

const TestComponent = () => {
  const [incrementTrigger, setIncrementTrigger] = useState(1);

  const toggleHandler = () => {
    setIncrementTrigger(incrementTrigger + 1);
  };

  useEffect(() => {
    console.log("Component Updated " + incrementTrigger);
    return () => {
      console.log("Clean Up - " + incrementTrigger);
    };
  }, [incrementTrigger]);

  return (
    <div className="mainContainer">
      <h2 className="text">
        这是一个用于观察useEffect钩子行为的临时组件。{" "}
      </h2>

      <button onClick={toggleHandler}>Toggle</button>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Sutriptim Nath