setInterval内调用setCount未触发React组件重渲染问题排查

你遇到的是React函数组件+Hooks最常见的闭包陷阱，所有异常表现都能从这个根因解释：

• 你给useEffect传了空依赖数组[]，意味着这个effect逻辑只会在组件首次挂载时执行1次，定时器回调、everyTick方法里捕获的count变量，永远是首次渲染时的初始值0，后续状态更新产生的新count值，和这个已经创建的回调里的闭包变量完全无关，所以你日志里打出来的count永远是0。
• 你查到的两个看似矛盾的结论并不冲突：setCount确实会把更新推入队列、触发组件重渲染，但新的状态值只有在重渲染完成、组件函数重新执行后，才会存在于新的作用域闭包中，之前已经注册的定时器回调拿不到这个新值。
• 切换标签页时count突然跳到1000+的原因：浏览器会对后台标签页的定时器做节流，你之前每秒触发的setCount调用会在标签页切回时集中执行，积压的更新一次性触发重渲染，就会看到count直接跳到积压后的数值；如果你的项目开启了React 18严格模式，重渲染过程中旧effect被清理、新effect重新执行，localCount就会被重置为0重新开始计数。

方案1：使用函数式状态更新（最推荐） #

setState支持传入更新函数，函数的入参是React保证的上一次最新状态值，完全不依赖闭包捕获的变量，不需要修改effect的依赖，也不用额外维护localCount变量：

function App() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer1 = setInterval(() => {
      // 函数式更新，始终拿到最新的前序状态
      setCount(prevCount => {
        const newCount = prevCount + 1;
        console.log("最新count值", newCount);
        return newCount;
      });
    }, 1000)
    return () => clearInterval(timer1);
  }, [])  

  return (
    // 页面内容
  );
}

export default App;

这个方案不会频繁销毁重建定时器，性能最优，适合绝大多数定时更新状态的场景。

方案2：将状态加入effect依赖数组 #

如果你确实需要在定时器回调里直接读取最新的count值，可以把count加到useEffect的依赖列表里，注意每次count变化、effect重执行前，一定要在上一次的清理函数里清除旧定时器，避免多个定时器同时运行：

useEffect(() => {
  const timer1 = setInterval(() => {
    console.log("最新count值", count);
    setCount(count + 1);
  }, 1000)
  return () => clearInterval(timer1);
  // 加入count依赖
}, [count])

这个方案的缺点是每秒都会销毁、重建一次定时器，性能略差，仅适合回调中存在大量依赖最新count的复杂逻辑时使用。

不推荐的绕路方案 #

你也可以通过useRef存储最新的count值，在定时器里读取ref的current属性拿到最新值，但这类写法可读性差、容易漏写ref更新逻辑，非特殊场景不建议使用。

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