小编Tim*_*Jao的帖子

我正在练习反应挂钩，并且正在创建一个非常简单的秒表应用程序。目前，我的代码正在做我想要它做的事情，但我不明白它为什么起作用。当我点击开始时，setTimeouts 运行并不断更新时间状态。当我点击停止时，它会清除超时。当我没有明确告诉它时，为什么它会清除超时。另外，根据react文档，useEffect中的返回仅在组件卸载时运行。但是，我将 console.logs 放入其中，发现每次调用 useEffect 时它都会运行返回的回调。最后，我删除了返回的回调，发现当我停止时它实际上并没有清除超时。有人可以帮我剖析一下吗？

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

function Stopwatch(){

  const [time, setTime] = useState(0);
  const [start, setStart] = useState(false);

  useEffect(() => {
    let timeout;
    if (start) {
      timeout = setTimeout(() => {setTime(currTime => currTime + 1);}, 1000);
    }

    return () => {
      clearTimeout(timeout);
    }
  });

  return(
    <>
      <div>{time}</div>
      <button onClick={() => setStart(currStart => !currStart)}>{start ? "Stop" : "Start"}</button>
    </>
  )
}

export default Stopwatch