为何React状态更新函数未因陈旧闭包失效？附代码示例

问题分析与解答 #

先看你的代码：

export default function App() {
  const [num, setNum] = useState(0);

  const randomize = useCallback(() => {
    setNum(Math.random());
  }, []);

  return (
    <div className="App">
      <h4>{num}</h4>
      <button onClick={randomize}>Randomize</button>
    </div>
  );
}

针对你的疑问逐一解答：

1. 为什么缓存的randomize能正常使用setNum？

React中useState返回的状态更新函数（比如setNum）是引用稳定的——不管组件渲染多少次，这个函数的引用都不会改变。所以即使你用useCallback把randomize缓存起来（依赖为空数组），里面用到的setNum始终是有效的，能正确触发状态更新。

2. 状态更新函数是否与对应状态绑定？

状态更新函数不与当前的状态值绑定。它的核心作用是通知React更新指定的状态，不管你拿到的是哪一次渲染返回的更新函数，调用它都能正确作用于最新的状态。比如你这里直接给setNum传新值（Math.random()），不需要依赖旧状态，所以更不会有问题；如果是基于旧状态计算新值的场景（比如setNum(prev => prev + 1)），即使更新函数是“陈旧”的，React也会在调用时传入当前最新的状态值给你。

3. 陈旧的更新函数是否会修改过时状态？

不会。React内部会维护状态的更新队列，无论你使用的是哪一次渲染得到的更新函数，调用它时React都会基于当前最新的状态来处理更新：

• 如果是直接传值（比如setNum(5)），就直接把状态替换为新值；
• 如果是函数式更新（比如setNum(prev => prev +1)），就把当前最新的状态作为参数传入函数，计算出正确的新值。
  不存在“修改过时状态”的问题。

4. 是否应将setNum作为依赖项？

从React Hooks的最佳实践和ESLint的react-hooks/exhaustive-deps规则来看，应该把setNum加入依赖数组。虽然setNum本身是稳定的，不加依赖在功能上不会出问题，但加入依赖能让代码符合规范，避免lint警告，同时让代码的依赖关系更清晰，后续如果回调逻辑变化（比如加入其他依赖），也不容易出错。

5. 当前代码正常运行的情况下，加不加setNum作为依赖有何实际差异？

因为setNum的引用始终不变，所以两种写法在功能上完全一致，randomize的引用都不会随着组件渲染而改变：

• 不加setNum：会触发ESLint的依赖缺失警告，代码不符合hooks规范，但功能正常；
• 加setNum：通过lint检查，代码更健壮、规范，后续维护时不容易因为依赖问题引入bug。

内容的提问来源于stack exchange，提问作者713sean