关于React useEffect无依赖数组、清理函数及状态更新的疑问

问题解析 #

1. 为什么空依赖数组的useEffect里，定时器能持续更新count？ #

你代码里的setCount用了函数式更新：setCount(count => count + 1)，这种写法和直接传值setCount(count + 1)的核心区别是——它不依赖当前作用域里的count变量，而是从React的状态管理系统中获取最新的count快照来计算新值。

因为你的useEffect是空依赖数组，它只会在组件首次挂载时执行一次，创建定时器。而定时器的回调每次触发时，都会通过函数式更新拿到最新的count，所以能持续让count加1。如果换成setCount(count + 1)，那首次挂载时count是0，定时器回调会一直沿用这个旧的count值，最终count只会变成1就不再更新了。

2. useEffect清理函数的作用是什么？ #

清理函数的核心作用是避免内存泄漏，清理组件挂载期间创建的资源，它会在两个时机触发：

• 组件卸载时
• 当前useEffect重新执行前（当依赖数组变化时）

在你的代码里，因为useEffect是空依赖，它只会执行一次，对应的清理函数只会在组件卸载时触发，用来清除定时器。如果你移除了清理函数，只要组件还没卸载，定时器确实会继续运行，但一旦组件卸载（比如路由跳转、组件被移除），这个定时器不会被自动清除，会一直在后台占用内存，甚至可能触发React的状态更新警告（组件卸载后尝试更新状态）。

另外，如果你的useEffect依赖数组有变化，每次依赖更新时，旧的清理函数会先执行，清除之前的定时器，再执行新的effect创建新定时器，这样就不会出现多个定时器同时运行导致count加速增长的问题。

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