近期，在 React 开发者社区中，一个看似简单却隐蔽的问题引发了广泛讨论：当在 useEffect 中使用 setInterval 定时读取 React state 时，即使组件因 state 更新而重新渲染，控制台却始终打印初始值。这一现象让许多开发者感到困惑，特别是在构建实时数据展示、轮询请求或倒计时功能时，错误的 state 值会导致逻辑偏差。本文将深入剖析这一问题的本质，并给出权威的解决路径。

现象重现：定时器“固执”地记住旧状态

假设我们有一个计数器组件，每点击按钮 count 加 1，同时设置一个每秒打印当前 count 的定时器：

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      console.log(count);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

预期行为：每次点击按钮，count 更新，控制台每秒打印最新的 count 值。
实际行为：无论点击多少次，控制台始终打印 0——组件重新渲染了，但定时器回调里的 count 从未改变。

根源剖析：闭包“冻结”了渲染时的快照

问题的核心在于 JavaScript 闭包机制 与 React 渲染周期的交互。
当 useEffect 的依赖数组为空 [] 时，其回调只会在组件首次挂载时执行一次。此时 setInterval 的回调函数形成了一个闭包，捕获了第一次渲染时 count 的值（即 0）。即使后续组件因 setCount 而重新渲染，useEffect 并不会重新执行（因为依赖未变），所以定时器回调中的 count 始终引用第一次渲染的变量——它永远不会更新。

我们可以将每次渲染理解为一次“快照”：每个渲染周期都有自己独立的 props 和 state。定时器回调被创建时绑定的是第一次渲染的 state 快照，后续重新渲染创建的新快照与旧闭包无关。

解决方案：三大策略应对闭包陷阱

1. 使用 useRef 保存最新值（推荐）

useRef 返回的可变对象在组件的整个生命周期内保持不变，且修改 .current 不会触发重新渲染。我们可以利用它来“桥接”不同渲染周期之间的最新 state：

const countRef = useRef(count);
countRef.current = count;  // 每次渲染时同步最新值

useEffect(() => {
  const id = setInterval(() => {
    console.log(countRef.current);
  }, 1000);
  return () => clearInterval(id);
}, []);

这样定时器回调始终通过 ref 读取最新的 count 值。

2. 将依赖加入 useEffect，每次重新创建定时器

将 count 放入 useEffect 的依赖数组中，每次 state 更新都会销毁旧定时器并创建新定时器。这种方法简单直观，但需要注意：如果定时器创建开销较大（如发起网络请求），频繁重建可能影响性能；且需避免在回调中同时更新 state 导致无限循环。

useEffect(() => {
  const id = setInterval(() => {
    console.log(count);
  }, 1000);
  return () => clearInterval(id);
}, [count]);

3. 使用函数式更新（适用于仅更新 state 的场景）

如果定时器回调的目的是更新 state（而不是读取），可以传递一个函数给 setState，该函数接收上一次 state 作为参数，从而避开闭包问题。但若需同时读取旧 state 或执行其他逻辑，仍需结合 ref。

setInterval(() => {
  setCount(prev => prev + 1);
}, 1000);

社区反应与最佳实践

Stack Overflow 上相关提问已超过 300 条，许多资深开发者将此类问题列为“React 新手十大坑”之一。React 官方在文档和 RFC 中多次强调：不要在 useEffect 的副作用回调中依赖闭包捕获的变量，除非明确理解渲染快照语义。

对于轮询、倒计时等场景，业内普遍推荐使用 useRef 配合 useEffect 的清理机制，或直接采用 useInterval 自定义 Hook（Dan Abramov 曾提供示例代码）。此外，若项目允许，也可考虑使用 @tanstack/react-query 等数据获取库，它们内部已处理好定时轮询的闭包问题。

结语

setInterval 中的“幽灵初始值”并非 React bug，而是 JavaScript 闭包与函数式组件渲染模型碰撞的自然结果。理解这一机制，将帮助你避开众多隐晦的 bug，写出更健壮的 React 应用。下次当你的定时器“坚持”打印旧值时，不妨想想：它记住的是哪个渲染快照？而你，又该如何对齐时间的指针？

（全文约 980 字）