1 背景与目标
1.1 为什么在 React 中需要计时器
React 计时器是实现轮询、动画以及周期性数据更新的常用工具，但在组件化的框架里，直接操作全局定时器会带来副作用与状态错位的风险。为了实现稳定、可预期的 UI 更新，需要将定时任务的生命周期与组件生命周期解耦，确保在合适的时机启动与清理。
正确的姿势可以避免更新错乱和内存泄漏，特别是在复杂页面中，计时器的取消、引用保持与避免重复创建尤为重要。掌握这部分内容，能显著提升应用的鲁棒性。
1.2 与生命周期的关系
useEffect 提供了天然的清理点，让定时器在组件卸载或依赖变化时自动清理，防止悬空引用导致的内存泄漏与意外更新。
将 setInterval 放入 useEffect 的空数组依赖中，可以确保定时器仅在挂载时创建一次，避免渲染过程中的反复创建，从而降低资源消耗。
2 setInterval 的正确姿势
2.1 基本模式：在组件挂载后启动、卸载时清理
最小可用实现：在组件挂载后启动定时器，并在清理函数中清除，确保组件生命周期内的计时更新同步。
下面的示例展示了如何使用 useEffect 搭配 setInterval，并使用函数式更新来避免将计数器放入依赖数组，从而实现稳定的状态更新。
import React, { useEffect, useState } from 'react';function Ticker() {const [count, setCount] = useState(0);useEffect(() => {const id = setInterval(() => {// 使用函数式更新，避免把 count 放入依赖数组setCount(c => c + 1);}, 1000);return () => clearInterval(id);}, []); // 只有一次挂载时创建return 计数: {count};
}
2.2 稳定的回调与依赖管理
当需要回调中访问最新的状态时，尽量避免把最新值放在依赖项中，否则会触发不必要的重新创建。此时可以使用函数式更新，或借助引用存储最新值以保持回调内的数据是“最新的”。
以下示例展示了两种方式：函数式更新与 useRef 结合最新回调，都能在不频繁重新创建定时器的前提下，读取最新状态。
import React, { useEffect, useRef, useState } from 'react';function App({ step = 1 }) {const [count, setCount] = useState(0);const latestStep = useRef(step);useEffect(() => { latestStep.current = step; }, [step]);useEffect(() => {const id = setInterval(() => {// 使用最新的 step 值来更新 countsetCount(c => c + latestStep.current);}, 1000);return () => clearInterval(id);}, []);return 计数: {count};
}
3 常见坑点全面解析
3.1 依赖数组错配导致重复创建
错误的依赖数组会让定时器在每次渲染时创建或清理，从而导致资源浪费、计时错乱甚至多次同时运行。
解决要点是把定时器的创建放在 useEffect 的空依赖或固定依赖组内，并用清理函数确保组件卸载时能正确取消定时器。
3.2 闭包导致的“旧数据”问题
如果直接在回调中读取 count，且没有将 count 放入依赖数组，回调中看到的将是闭包创建时的旧值。这会导致计时更新滞后或出现不确定行为。
为了解决这一类问题，通常采用函数式更新（setCount(c => c + 1)）或借助 useRef 持有最新值来在定时器回调中使用。
// 闭包导致的旧数据问题示例
useEffect(() => {const id = setInterval(() => {setCount(count + 1); // count 在闭包中不是最新}, 1000);return () => clearInterval(id);
}, []); // 依赖为空，count 为初始值
// 改进：使用函数式更新
useEffect(() => {const id = setInterval(() => {setCount(c => c + 1);}, 1000);return () => clearInterval(id);
}, []);
3.3 清理不彻底的风险与内存泄漏
未在清理函数中注销定时器，或在组件卸载后仍然进行状态更新，都会导致内存泄漏与潜在错误，尤其在页面路由切换频繁时尤为明显。
为避免这种情况，务必在 useEffect 的返回函数里执行 clearInterval，并在需要时取消订阅或关闭后台任务，以确保资源得到释放。
3.4 在 StrictMode 下的双重挂载与计时器
React 18 的 StrictMode 在开发环境会对副作用进行双重调用以捕捉问题，这可能让定时器在测试阶段出现“被创建两次”的现象。
解决办法是让定时器的清理逻辑健壮，即使在开发阶段也能正确清理；同时可以在生产环境避免影响到实际的用户体验。
3.5 多实例场景下的计时器冲突
当同一页面存在多个组件各自维护计时器时，需要确保它们彼此独立而不会互相干扰，推荐为每个计时器使用独立的引用和清理逻辑，避免误用全局变量。
若确实需要跨组件共享计时器，可以通过 context 或自定义 hook 的方式来管理统一的计时调度，但需谨慎设计更新的粒度与清理时序。
4 高级实践与性能优化
4.1 高精度与漂移控制
setInterval 的时间漂移是不可避免的，如果对时间精度有严格要求，需考虑漂移修正策略，例如记录上次执行时间点并以实际时间差来驱动下一次更新。
下面给出一个漂移修正的基本实现思路：通过 Date.now() 计算实际时间差，将回调的推进量按实际差值来累加，避免长期累积误差。
import React, { useEffect, useRef, useState } from 'react';function useDriftAdjustedTimer(ms, onTick) {const saved = useRef(onTick);useEffect(() => { saved.current = onTick; }, [onTick]);useEffect(() => {let last = Date.now();const id = setInterval(() => {const now = Date.now();const delta = now - last;last = now;// 将 delta 作为输入传给回调，回调内部即可按需处理saved.current(delta);}, ms);return () => clearInterval(id);}, [ms]);
}function Clock() {const [t, setT] = useState(Date.now());useDriftAdjustedTimer(1000, (delta) => {// 不依赖外部 state，直接触发更新setT(Date.now());});return 时间戳: {t};
}
通过漂移修正，可以在高频或高精度场景中保持较为稳定的输出，而不仅仅是简单的固定间隔触发。
4.2 将计时逻辑与 UI 分离与测试
将计时逻辑与 UI 分离有助于测试与重用，可以将计时逻辑放在自定义 hook 或 Web Worker 中，减少对组件渲染的直接影响。
以下示例演示了将计时逻辑放在自定义 hook 中，并在主线程通过 setState 监听结果，从而实现清晰的职责分离。
import React, { useEffect, useState } from 'react';function useTicker(interval = 1000) {const [tick, setTick] = useState(0);useEffect(() => {const id = setInterval(() => setTick(t => t + 1), interval);return () => clearInterval(id);}, [interval]);return tick;
}function TimerComponent() {const tick = useTicker(1000);return Tick: {tick};
}
4.3 Web Worker 的应用场景与示例
在大规模或低优先级的定时任务中，使用 Web Worker 可以把计时逻辑放到后台，避免阻塞主线程和 UI 更新。
下面是一段简化示例，展示如何通过 Worker 维护一个定时器并向主线程发送消息，主线程再将结果传给 React 组件进行渲染。
// timer.worker.js
let t = 0;
setInterval(() => postMessage(t++), 1000);// main thread (React component)
const worker = new Worker('timer.worker.js');
worker.onmessage = (e) => {// 发送到 React 组件的状态更新逻辑// setCounter(e.data);console.log('Worker tick:', e.data);
};
