关于react hooks定时器问题

Question

代码如下

import React, { useState, useEffect } from 'react';
import MajorClock from './MajorClock';
import ControlButtons from './ControlButtons';
import SplitTimes from './SplitTimes';

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 / 60);
  }

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

  const onReset = () => {
    setTime(null);
    setCurrentTime(null);
    setSplits([]);
  }
  const onSplit = () => {
    setSplits([...splits, currentTime - startTime])
  }

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

export default StopCWatch;

onStart的时候开启定时器，点击按钮停止时清除定时器，但是现在写的有问题，onPause方法中获取不到定时器
intervalHandle

Answer 1

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

let intervalHandle = useRef();

创建时

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

清除时

clearInterval(intervalHandle.current);

原因是每次组件重新渲染的时候, 都会执行 let intervalHandle; , 所以你清除定时器时, 都获取不到intervalHandle