2026年了，React 里用 setInterval 拿 state，为什么总是初始值？

先说结论：2026 年排查 React 定时器问题，setInterval 回调里读到的 state 总是初始值，常见原因是闭包捕获了“创建定时器那一次渲染”的 state 快照，而不是定时器没触发。“读最新值做判断”优先用 useRef 镜像；“基于旧值累加”优先用 setCount(prev => ...)；只有确实需要随某个 state 重建定时器时，才改 useEffect 依赖。

先分清：回调是在“读 state”，还是在“写 state”

两个动作混在一起最容易踩坑。例如回调先判断 count 是否大于 0，再 setCount(count - 1)，这里 count 来自第一次渲染。页面常表现为只推进了一次，之后就停住，因为后续每次计算用的仍是旧副本。

判断标准：state 参与 if、函数入参或展示拼接，是读场景；回调只用 setXxx(prev => ...) 推下一次值，是写场景。两类逻辑尽量不要放在同一个回调里。

useRef 能读到最新值，但它不是 state 替代品

useRef 在整个生命周期返回同一个对象，回调里访问 ref.current 拿到的总是最近写入的值；state 每次渲染生成新副本，旧闭包只能看到旧副本。

• 同步写法：常配合 useEffect 把最新值写入 ref。
• 渲染差异：ref.current 变化不会触发渲染，最终展示还得 setState。
• 职责边界：不要把整份页面状态放进 ref。

三种做法怎么选：函数式更新、ref 镜像、重启定时器

三种做法的目的不同，应按数据目标选择。

• 函数式更新：setCount(prev => prev + 1) 不读外层闭包，适合倒计时、累加器。单处改动成本经验区间约十几分钟到一小时；局限是在回调里不能再读取其他 state 做复杂判断。
• ref 镜像：适合读取用户偏好、服务端偏移等最新值做判断。需加一个同步 effect，单处引入经验区间约半小时到一小时，涉及多处同步约半天内完成。
• 重启定时器：把依赖值放进 useEffect，变化时清理并重建 interval，适合定时条件随低频状态变化的场景。状态每秒变时会反复重启，间隔会永远从头计。

交付现场：校时倒计时卡在旧快照之后

之前交付“会议开始前 10 分钟”倒计时，业务要求每分钟与服务器校对时间。约束是校内瞬间秒数不能回跳，页面不能明显卡顿。第一版把服务端时间偏移放进 useEffect 依赖，interval 每分钟被销毁重建，实际运行出现秒数跳变。

后来把时间偏移放入 ref，setInterval 只负责“本地时间 + 偏移”的每秒计算结果并 setState；useEffect 依赖保持空数组并返回 clearInterval。线上不再回跳，代价是多一段 ref 同步逻辑，维护者需先理解闭包才能动它。同类修正经验区间：单组件约半小时到一小时；多页面统一清点加回归，约半天到一天。

可核对三件事：StrictMode 下无重复定时器；手动操作后下一拍不再读到旧值；页面切后台再回来不叠加定时器。

适用场景与不适用边界

这套方法解决的是 state 闭包旧快照，不解决定时器本身不合适的问题。

• 适用：低频轮询、倒计时、轮播、本地状态周期同步，对单次延迟不敏感。
• 不适用：高频动画优先选 requestAnimationFrame，不要用 setInterval 模拟帧率。
• 不必用：一次性延迟用 setTimeout，接口轮询用 setTimeout 递归并注意切后台时暂停。
• 时间源提醒：展示服务端时间应以服务端基准为准，本地定时器只负责到期刷新渲染。

常见问题

setInterval 里的 count 为什么一直是初始值？

setInterval 回调创建时，闭包把那次渲染的 count 包了进去。后续 count 更新，闭包没变，每次执行看到的还是旧副本。

useRef 镜像能拿到最新值，能直接把值渲染到页面吗？

不能。ref.current 变化不会触发组件重新渲染；仍需 setState 让页面更新。ref 只是回调读取最新值的通道。

函数式更新和 ref 镜像能不能同时用？

能。读取判断走 ref，状态推进走函数式更新，避免同一个回调里既读 state 又写 state，旧快照造成的副作用会更少。

关闭 StrictMode 能避免双定时器吗？

不建议用关闭严格模式来规避。开发环境双挂载可以当作提醒，应在 useEffect 清理函数中 clearInterval 并检查依赖数组。

定时器清理函数写了，count 还是旧值，是哪里漏了？

清理函数只负责移除旧 interval，不会替换闭包中的 count。若读的仍是 state，新 interval 创建时会再次保存当时的 state 快照。

2026 年的 React 工程里，定时器回调应尽量看作“长期不重建的代码”：读取最新状态用 ref，累计变化交给函数式更新，需重启定时器时接受间隔会重计。按这个顺序处理，通常能在一轮改动内收敛；仍未解决时再查渲染频率、清理时机与服务端时间源。