React函数组件中使用setInterval更新state计时器停滞问题咨询

问题根源 #

这是闭包捕获旧state值导致的典型问题：

• 当你点击按钮调用updateTimer时，setInterval的回调函数会"记住"当前组件渲染周期里的time值——也就是初始的0。
• 之后每一秒，回调都会执行updateTime(time + 1)，但这里的time始终是闭包中保存的那个初始值0，所以每次都是把state设置为0+1=1。
• 当state更新到1后，组件会重新渲染，但之前创建的setInterval回调依然绑定着旧渲染周期的time（值为0），后续的回调还是会把state设置为1，自然就停滞不动了。

修复方案 #

方案1：使用函数式更新state #

React的state更新函数支持传入一个回调，这个回调会接收当前最新的state值作为参数，返回新的state。这样就能确保每次更新都基于最新的state，彻底避开闭包的问题：

function Timer() {
  const [time, updateTime] = useState(0);
  
  function updateTimer() {
    setInterval(() => {
      // 用prevTime获取当前最新的state值
      updateTime(prevTime => prevTime + 1);
    }, 1000);
  }

  return (
    <>
      <span>{time} seconds</span>
      <button onClick={updateTimer}>Click To Start</button>
    </>
  );
}

方案2：优化定时器管理（避免重复计时） #

上面的写法还有个隐藏问题：多次点击按钮会创建多个独立的setInterval，导致计时器加速。可以用useRef保存定时器ID，在创建新定时器前清理旧的，同时在组件卸载时自动清理：

import { useState, useRef, useEffect } from 'react';

function Timer() {
  const [time, updateTime] = useState(0);
  const timerIdRef = useRef(null);
  
  function updateTimer() {
    // 清理已存在的定时器
    if (timerIdRef.current) clearInterval(timerIdRef.current);
    // 创建新定时器并保存ID
    timerIdRef.current = setInterval(() => {
      updateTime(prevTime => prevTime + 1);
    }, 1000);
  }

  // 组件卸载时自动清理定时器
  useEffect(() => {
    return () => {
      if (timerIdRef.current) clearInterval(timerIdRef.current);
    };
  }, []);

  return (
    <>
      <span>{time} seconds</span>
      <button onClick={updateTimer}>Click To Start</button>
    </>
  );
}

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