React STOPWATCH專案製作

以一般邏輯來寫

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

const Stopwatch = () => {
  const [time, setTime] = useState(0); // 當前時間（以秒為單位）
  const [isRunning, setIsRunning] = useState(false); // 計時器是否正在運行

  const intervalRef = useRef(null); // 用於保存計時器的 ID

  useEffect(() => {
    if (isRunning) {
      // 如果計時器正在運行，則每 10 毫秒更新一次時間
      intervalRef.current = setInterval(() => {
        setTime((prevTime) => prevTime + 0.01);
      }, 10);
    }

    // 在組件卸載時或isRunning改變時清除計時器，避免記憶體洩漏、避免意外行為
    return () => clearInterval(intervalRef.current);
  }, [isRunning]); // 依賴 isRunning 狀態

  const start = () => {
    setIsRunning(true);
  };

  const pause = () => {
    setIsRunning(false);
  };

  const reset = () => {
    setIsRunning(false);
    setTime(0);
  };

  // 格式化時間，將秒轉換為分鐘、秒和毫秒
  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    const milliseconds = Math.floor((time % 1) * 100);

    return `${minutes.toString().padStart(2, '0')}:${seconds
      .toString()
      .padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`;
  };

  return (
    <div>
      <h1>Stopwatch</h1>
      <div>
        {/* 顯示格式化後的時間 */}
        <p>{formatTime(time)}</p>
      </div>
      <div>
        {/* 根據計時器狀態顯示開始或暫停按鈕 */}
        {!isRunning ? (
          <button onClick={start}>Start</button>
        ) : (
          <button onClick={pause}>Pause</button>
        )}
        {/* 重置按鈕 */}
        <button onClick={reset}>Reset</button>
      </div>
    </div>
  );
};

export default Stopwatch;