React中setInterval与状态管理：构建精确计时器的最佳实践

const Clock = () => {
  const [timerMinutes, setTimerMinutes] = useState(25);
  const [timerSeconds, setTimerSeconds] = useState(0);

  const startStop = () => {
    setInterval(()=>{
      setTimerMinutes(prevMins => {
        let time = prevMins*60; // 基于旧的分钟数计算总秒数
        setTimerSeconds(prevSecs => {
          time+=prevSecs; // 加上旧的秒数
          time-=1; // 总秒数减1
          return time%60; // 计算新的秒数
        })
        return Math.floor(time/60);  // 计算新的分钟数
      });
    }, 1000);
  }
  // ... 其他代码
}

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

const Clock = () => {
  // 使用一个状态对象来管理分钟和秒数
  const [timer, setTimer] = useState({ minutes: 25, seconds: 0 });
  const intervalRef = useRef(null); // 用于存储setInterval的ID

  const startStop = () => {
    // 启动前先清除可能存在的旧interval
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }

    intervalRef.current = setInterval(() => {
      setTimer(prevTimer => {
        let totalSeconds = prevTimer.minutes * 60 + prevTimer.seconds;
        if (totalSeconds <= 0) {
          clearInterval(intervalRef.current); // 计时结束，清除interval
          return { minutes: 0, seconds: 0 };
        }
        totalSeconds -= 1; // 总秒数减1

        return {
          minutes: Math.floor(totalSeconds / 60),
          seconds: totalSeconds % 60,
        };
      });
    }, 1000);
  };

  // 确保在组件卸载时清除interval
  useEffect(() => {
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);

  const formatTime = (minutes, seconds) => {
    const pad = (num) => (num < 10 ? '0' + num : num);
    return `${pad(minutes)}:${pad(seconds)}`;
  };

  return (
    <div>
      <div>25 + 5 Clock</div>
      <TimerDisplay timerMinutes={timer.minutes} timerSeconds={timer.seconds} onStartStop={startStop} />
    </div>
  );
};

// TimerDisplay组件应该在外部定义，避免每次渲染都重新创建
const TimerDisplay = ({ timerMinutes, timerSeconds, onStartStop }) => {
  return (
    <div onClick={onStartStop}>
      <div id="timer-label">Session</div>
      <div id="time-left">{`${timerMinutes < 10 ? '0' + timerMinutes : timerMinutes}:${timerSeconds < 10 ? '0' + timerSeconds : timerSeconds}`}</div>
    </div>
  );
};

// 概念性代码，实际实现会更复杂，需要处理暂停、恢复等逻辑
const startPreciseTimer = () => {
  const startTime = Date.now(); // 记录开始时间
  const totalDuration = 25 * 60 * 1000; // 总时长（毫秒）

  intervalRef.current = setInterval(() => {
    const elapsedTime = Date.now() - startTime;
    const remainingTime = Math.max(0, totalDuration - elapsedTime);

    setTimer({
      minutes: Math.floor(remainingTime / (60 * 1000)),
      seconds: Math.floor((remainingTime / 1000) % 60),
    });

    if (remainingTime <= 0) {
      clearInterval(intervalRef.current);
    }
  }, 1000); // 间隔仍然是1秒，但每次都重新计算
};

// TimerDisplay组件应定义在Clock组件之外
const TimerDisplay = ({ timerMinutes, timerSeconds, onStartStop }) => {
  // ... 组件逻辑
};

const Clock = () => {
  // ... Clock组件逻辑
  return (
    <div>
      {/* ... */}
      <TimerDisplay timerMinutes={timer.minutes} timerSeconds={timer.seconds} onStartStop={startStop} />
    </div>
  );
};

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

const Clock = () => {
  const [timer, setTimer] = useState({ minutes: 25, seconds: 0 });
  const intervalRef = useRef(null); // 使用useRef存储interval ID

  const startStop = () => {
    // 每次启动前先清除之前的interval，防止重复设置
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }

    intervalRef.current = setInterval(() => {
      setTimer(prevTimer => {
        let totalSeconds = prevTimer.minutes * 60 + prevTimer.seconds;
        if (totalSeconds <= 0) {
          clearInterval(intervalRef.current); // 计时结束，清除interval
          intervalRef.current = null; // 清空引用
          return { minutes: 0, seconds: 0 };
        }
        totalSeconds -= 1;
        return {
          minutes: Math.floor(totalSeconds / 60),
          seconds: totalSeconds % 60,
        };
      });
    }, 1000);
  };

  // 使用useEffect来管理interval的生命周期
  useEffect(() => {
    // 返回的函数会在组件卸载时执行清理
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

  // ... 其他代码
};