ReactJS番茄钟计时器启动与停止功能异常问题排查

我来帮你排查这个问题～你的计时器停不下来的核心原因是定时器ID的保存方式不对，导致执行clearInterval的时候拿不到正确的定时器引用。

问题出在哪？ #

你在组件函数内部用var tick;声明了定时器变量，但React组件每次渲染（比如点击START/STOP触发setStart，或者setTimer更新状态时）都会重新执行整个PomView函数，这意味着每次渲染都会重新创建一个新的tick变量。当你点击STOP进入useEffect的else分支时，这里的tick已经不是之前启动定时器时保存的那个ID了，自然无法正确清除定时器。

另外，还有个小隐患：如果组件在定时器运行时卸载，没有清理定时器会导致内存泄漏。

修复方案：用useRef持久化定时器ID #

useRef的.current属性在组件整个生命周期里是持久化的，不会随着组件渲染重置，刚好适合用来保存定时器ID。

修改步骤如下：

1. 把var tick;替换成const tickRef = useRef(null);，用ref来保存定时器ID
2. 启动定时器时，把ID赋值给tickRef.current
3. 清除定时器时，使用tickRef.current
4. 在useEffect的清理函数中也加入定时器清除逻辑，防止组件卸载时的内存泄漏

修改后的完整代码 #

import { useState, useEffect, useRef } from 'react';
import { AiFillFastForward } from 'react-icons/ai';

const PomView = () => { 
  const [timer, setTimer] = useState(1500); // 25 minutes 
  const [start, setStart] = useState(false); 
  const firstStart = useRef(true); 
  const tickRef = useRef(null); // 用ref持久化定时器ID

  useEffect(() => { 
    if (firstStart.current) { 
      console.log("first render, don't run useEffect for timer"); 
      firstStart.current = !firstStart.current; 
      return; 
    } 

    console.log("subsequent renders"); 
    console.log(start); 

    if (start) { 
      // 把定时器ID存在ref里
      tickRef.current = setInterval(() => { 
        setTimer(timer => { 
          const newTimer = timer - 1;
          console.log(newTimer); 
          return newTimer; 
        }); 
      }, 1000); 
    } else { 
      console.log("clear interval"); 
      // 用ref里的ID清除定时器
      clearInterval(tickRef.current); 
    }

    // 清理函数：组件卸载时清除定时器
    return () => {
      clearInterval(tickRef.current);
    };
  }, [start]); 

  const toggleStart = () => { 
    setStart(!start); 
  }; 

  const dispSecondsAsMins = (seconds) => { 
    console.log("seconds " + seconds); 
    const mins = Math.floor(seconds / 60); 
    const seconds_ = seconds % 60; 
    // 优化一下数字补零的逻辑，比如1秒变成01
    return `${mins}:${seconds_.toString().padStart(2, '0')}`;
  }; 

  return ( 
    <div className="pomView"> 
      <ul> 
        <button className="pomBut">Pomodoro</button> 
        <button className="pomBut">Short Break</button> 
        <button className="pomBut">Long Break</button> 
      </ul> 
      <h1>{dispSecondsAsMins(timer)}</h1> 
      <div className="startDiv"> 
        <button className="startBut" onClick={toggleStart}>{!start ? "START" : "STOP"}</button> 
        {start && <AiFillFastForward className="ff" onClick="" />} 
      </div> 
    </div> 
  ); 
}; 

export default PomView;

额外优化点 #

我还帮你优化了dispSecondsAsMins里的补零逻辑，用padStart(2, '0')可以更简洁地实现1位数字补零（比如5秒变成05），比原来的条件判断更优雅～

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