React Hooks两种setCount写法差异及定时器场景失效原因

两种写法表现差异本质是状态更新时拿到的count值来源不一样：

• 普通点击计数器能正常工作，是因为每次组件重渲染都会重新生成onClick回调，回调里引用的count是当前渲染周期的最新状态值，点击时取到的永远是最新值，累加自然不会出错。
• 秒表代码卡在1.0不动，完全是useEffect空依赖+闭包特性共同导致的：
  1. 你给useEffect传了空依赖数组[]，这个effect逻辑只会在组件首次挂载时执行1次，后续重渲染都不会重新执行，也就不会替换旧的定时器。
  2. 首次挂载时创建的定时器回调，永远处在首次渲染的闭包上下文里，它能拿到的count永远是初始值0。
  3. 第一次定时器触发时执行setCount(0 + 1)，count更新为1，组件触发重渲染，但旧定时器没有被替换，之后每100ms触发时，执行的都是setCount(0 + 1)，相当于反复把count赋值为1，数值自然不会继续增长。

为什么函数式更新写法能修复问题 #

setCount(count => count + 0.1)属于React的函数式更新语法，它不依赖当前闭包上下文里存储的count变量：React执行更新时，会自动把上一次更新后的最新状态值作为参数传入更新函数，哪怕定时器回调是首次渲染时创建的，也能拿到最新的count值做累加，功能自然恢复正常。

额外提一句：你调整数值为每次加0.1，配合toFixed(1)显示1位小数，刚好匹配100ms跳一次的秒表精度，这个数值修改是合理的。

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