修改useCallback依赖触发重渲染后，为什么z==k仍输出true？

问题原因 #

你对useCallback的基础认知是对的：当依赖项myValue变化触发重渲染时，新渲染周期中的useCallback确实会返回全新的函数实例。最终打印结果为true的核心原因是两个setTimeout回调捕获的是首次渲染作用域中的变量，和后续重渲染的作用域完全隔离。

完整执行流程拆解 #

1. 首次组件渲染阶段

   • 生成当前渲染独立的作用域，此时myValue初始值为30
   • 声明k、z为空对象，useCallback根据依赖[30]生成第一个函数实例，赋值给当前作用域的变量a
   • 将当前作用域的a赋值给k，此时k指向第一个函数实例
   • 注册两个setTimeout回调：这两个回调都是在首次渲染作用域下创建的，它们会永久捕获当前作用域的所有变量，和后续重渲染产生的新作用域没有任何关联。

2. 2秒后第一个定时器触发

   • 执行setValue(60)触发组件重渲染，进入第二个独立的渲染作用域
   • 新作用域中myValue为60，useCallback根据新依赖[60]生成第二个函数实例，赋值给新作用域的变量a
   • 本次渲染不会注册新的定时器，之前注册的两个回调依旧绑定首次渲染的作用域。

3. 4秒后第二个定时器触发

   • 执行的是首次渲染作用域下注册的回调，用到的a、z、k全都是首次渲染作用域中的变量，和第二次渲染的作用域完全无关
   • 首次渲染作用域中的a从未被修改，一直指向第一个函数实例，k也指向同一个实例，因此z == k判断返回true。

验证方法 #

你可以在第二个定时器回调中加一行console.log(myValue)，会发现打印结果是30而非60，直接证明回调捕获的是首次渲染的作用域变量。如果要拿到最新的a实例做对比，可以把对比逻辑放到useEffect中，依赖项设为a即可。

内容的提问来源于stack exchange，提问作者Nika Kurashvili