react hooks定时器问题

项目场景：

react hooks定时器--清除定时器

问题描述：

onStart的时候开启定时器，点击按钮停止时清除定时器,onPause方法中获取不到定时器

function StopCWatch() {

  const [isStarted, setStarted] = useState(false);
  const [startTime, setTime] = useState(null); // 开始时间
  const [currentTime, setCurrentTime] = useState(null); // 当前时间
  const [splits, setSplits] = useState([]);
  let intervalHandle;

  // 开始
  const onStart = () => {
    setStarted(true);
    setTime(new Date().getTime());
    setCurrentTime(new Date().getTime());
    // 定时器
    intervalHandle = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
  }

  // 停止
  const onPause = () => {
    clearInterval(intervalHandle); // 清除定时器有问题
    setStarted(false);
  }

  return (
    <div>
      <MajorClock milliseconds={currentTime - startTime}/>
      <ControlButtons
        activated={isStarted}
        onStart={onStart}
        onPause={onPause}
      />
      <SplitTimes values={splits}/>
    </div>
  )
}

export default StopCWatch;

---

原因分析：

原因:直接通过clearInterval(intervalHandle)是无法清除掉定时器的,每次组件重新渲染的时候, 都会执行 let intervalHandle; , 所以你清除定时器时, 都获取不到intervalHandle。

---

解决方案：

把定时器的handle用useRef保存起来

let intervalHandle = useRef();

创建时

intervalHandle.current = setInterval(() => {
  setCurrentTime(new Date());
}, 1000);

清除时

clearInterval(intervalHandle.current);