React组件定时器卸载重挂载后timerRef状态累加问题解决

核心问题分析 #

即使调用了clearInterval，定时器仍持续累加的常见原因：

• timerRef存储的定时器ID未被正确重置，导致卸载时清理的是旧ID，新挂载的定时器继续运行
• 组件卸载后仍有异步操作触发状态更新，间接重新启动定时器
• useEffect的依赖数组配置不当，导致重复创建定时器

解决方案步骤 #

1. 确保定时器ID正确追踪与清理

修改CountdownTimer组件的useEffect逻辑，在清理时不仅清除定时器，还要重置timerRef.current为null，同时添加挂载状态标记避免卸载后更新状态：

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

const CountdownTimer = ({ initialTime, onTimeUp }) => {
  const [remainingTime, setRemainingTime] = useState(initialTime);
  const timerRef = useRef(null);
  const isMountedRef = useRef(true); // 追踪组件是否处于挂载状态

  // 组件卸载时标记为未挂载
  useEffect(() => {
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  useEffect(() => {
    if (remainingTime <= 0) {
      onTimeUp?.();
      return;
    }

    // 先清理已有定时器，避免叠加
    if (timerRef.current) {
      clearInterval(timerRef.current);
    }

    timerRef.current = setInterval(() => {
      // 仅在组件挂载时更新状态
      if (isMountedRef.current) {
        setRemainingTime(prev => {
          if (prev <= 1) {
            clearInterval(timerRef.current);
            timerRef.current = null;
            onTimeUp?.();
            return 0;
          }
          return prev - 1;
        });
      }
    }, 1000);

    // 清理函数：卸载或依赖变化时清除定时器并重置ref
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
        timerRef.current = null;
      }
    };
  }, [remainingTime, onTimeUp]);

  // 圆形倒计时UI渲染逻辑
  return (
    <div className="countdown-timer">
      {/* 替换为你的圆形进度条组件 */}
      <span>{remainingTime}</span>
    </div>
  );
};

export default CountdownTimer;

2. 页面切换时强制重置组件

在调用CountdownTimer的页面（如QuestionPage、LeadersBoardPage），使用key属性强制组件在页面切换时重新初始化，避免复用旧实例：

// QuestionPage.jsx示例
const QuestionPage = () => {
  const [isActive, setIsActive] = useState(true);

  return (
    <div>
      {isActive && (
        <CountdownTimer 
          key="question-timer" // 页面切换时改变key值，比如用路由路径或页面标识
          initialTime={30} 
          onTimeUp={() => setIsActive(false)} 
        />
      )}
    </div>
  );
};

3. 验证清理效果

在清理函数中添加日志，确认每次卸载时定时器被正确清理：

// 清理函数中添加日志
return () => {
  if (timerRef.current) {
    console.log('清理定时器ID:', timerRef.current);
    clearInterval(timerRef.current);
    timerRef.current = null;
    console.log('定时器已清理，timerRef当前值:', timerRef.current);
  }
};

关键注意事项 #

• 始终在useEffect的清理函数中重置timerRef.current为null，避免残留旧ID
• 使用isMountedRef阻断卸载后的状态更新，防止内存泄漏
• 当组件需要完全重置时，通过key属性强制React创建新组件实例

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