React中useEffect结合setInterval使用时，传入函数名与匿名函数的差异及代码失效问题

嗨，这个问题其实戳中了JavaScript闭包和函数引用时效性的关键点，咱们一步步拆解来看就很清晰啦～

首先先明确核心差异：这两种写法本质上是给setInterval传递的函数引用是否会实时更新的区别，咱们分别说：

1. 直接传入savedCallback.current为啥会失效？ #

你的第二个useEffect依赖是空数组[]，这意味着它只会在组件第一次挂载的时候执行一次。当它执行时，会把此时此刻的savedCallback.current函数引用直接传给setInterval。

这里有两个致命问题：

• 首先，这个被传进去的函数是**闭包捕获了初始的count值（也就是0）**的。之后哪怕savedCallback.current会在每次组件渲染后被第一个useEffect更新成新的函数（比如count变成1后，新函数是() => setCount(1+1)），但setInterval手里握着的还是最开始那个旧函数——它永远只会执行setCount(0+1)，所以count到1之后就彻底停住不动了，看起来就像代码“不工作”。
• 极端情况下如果第一个useEffect的执行时机晚于第二个（虽然React挂载时是渲染后按顺序执行useEffect，一般不会，但也存在理论可能），那当时savedCallback.current还是undefined，直接传的话setInterval会直接报错，连第一次执行都做不到。

2. 用匿名函数() => { savedCallback.current() }包裹为啥能正常工作？ #

这种写法给setInterval传的是一个无状态的匿名函数，它本身不捕获任何旧的变量或函数引用，唯一的逻辑就是：每次定时器触发时，都去实时读取当前最新的savedCallback.current，然后调用它。

也就是说，每过1秒定时器触发时，它都会去拿第一个useEffect刚刚更新好的最新函数（这个函数里的count是当前渲染时的最新值），自然就能正确地把count加1，整个计数器也就正常跑起来了。

一句话总结 #

直接传函数时，setInterval拿到的是「挂载那一刻的“过期”函数引用」，之后再也不会更新；而用匿名函数包裹时，相当于每次触发都去「实时取最新的函数引用」，完美跟上了组件状态的变化节奏～

备注：内容来源于stack exchange，提问作者Kelsey Zhou