React切换浏览器标签或应用后状态不更新问题咨询

原因 #

这是浏览器的后台标签性能优化机制导致的。为了减少CPU占用、延长设备续航，浏览器会对处于后台的标签页中的定时器（setInterval/setTimeout）进行节流，大幅降低它们的执行频率——比如原本每秒执行一次的定时器，后台时可能十几秒才触发一次，并非完全停止，但会让你的秒表看起来像是“停滞”了。

解决方案 #

不要依赖定时器的触发次数来累加时间，改用时间戳差值计算的方式：

• 记录秒表启动时的时间戳（比如用Date.now()）
• 用定时器（哪怕被节流）触发组件重新渲染，每次渲染时计算当前时间戳与起始时间戳的差值，得到真实的流逝时间
• 根据差值格式化出时分秒展示

示例代码 #

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

function Stopwatch() {
  const [isRunning, setIsRunning] = useState(false);
  const startTimeRef = useRef(null);
  const [elapsedTime, setElapsedTime] = useState(0);

  useEffect(() => {
    let intervalId;
    if (isRunning) {
      startTimeRef.current = startTimeRef.current || Date.now();
      intervalId = setInterval(() => {
        // 每次计算当前与起始时间的差值，得到真实流逝时间
        const now = Date.now();
        setElapsedTime(now - startTimeRef.current);
      }, 1000);
    } else if (!isRunning && elapsedTime !== 0) {
      // 暂停时保留当前流逝时间，下次启动基于此继续计算
      startTimeRef.current = Date.now() - elapsedTime;
    } else {
      startTimeRef.current = null;
      setElapsedTime(0);
    }

    return () => clearInterval(intervalId);
  }, [isRunning]);

  // 格式化毫秒为时分秒
  const formatTime = (ms) => {
    const totalSeconds = Math.floor(ms / 1000);
    const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
    const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
    const seconds = String(totalSeconds % 60).padStart(2, '0');
    return `${hours}:${minutes}:${seconds}`;
  };

  return (
    <div>
      <h1>{formatTime(elapsedTime)}</h1>
      <button onClick={() => setIsRunning(!isRunning)}>
        {isRunning ? '暂停' : '启动'}
      </button>
      <button onClick={() => {
        setIsRunning(false);
        setElapsedTime(0);
        startTimeRef.current = null;
      }}>重置</button>
    </div>
  );
}

export default Stopwatch;

这种方式下，不管后台定时器被节流多久，只要回到标签页，渲染时都会用当前真实时间计算流逝时长，秒表会立刻显示正确的时间。

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