useEffect的返回究竟是如何工作的？为什么代码会这样执行？

Question

我正在练习反应钩子，我正在创建一个非常简单的秒表应用程序。 目前，我的代码正在做我想要它做的事情，但我不明白它为什么有效。当我点击开始时，设置超时会运行并不断更新时间状态。当我点击停止时，它会清除超时。为什么当我没有明确告诉它时它会清除超时。此外，根据 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

Answer 1

为什么当我没有明确告诉它时它会清除超时？

在您的实现中，useEffect在每次重新渲染后运行，因为您没有指定依赖项数组，因此如果您启动计时器，然后在中间按停止，清理功能将运行，并且最后一次超时将被清除

事情是这样的，

组件挂载 ->useEffect回调触发并返回函数 ->当组件重新渲染时，返回的函数被执行，循环返回到运行useEffect回调。

您可能在文档中读到的内容有一个空的依赖项数组，这是useEffect的第二个参数

useEffect(() => {
console.log('will only run when the component mounts for the first time')
return () => {
console.log('will only run when the component unmounts')
}
}, []) // nothing inside the dependencies array, run this once

更好的组件实现将是这样的

function Stopwatch(){
const [time, setTime] = useState(0)
const [start, setStart] = useState(false)
useEffect(() => {
// when start is false there is no reason to set up a timer or return a
// cleanup function so lets just exit early
if (!start) return 
// start is true, set up the interval
const intervalId = setInterval(() => setTime(prevTime => prevTime + 1), 1000)
// return a cleanup function that will run only when start changes
// to false
return () => clearInterval(intervalId)
}, [start]) // run this effect only when start changes
const toggleStart = () => setStart(prevStart => !prevStart)
return(
<>
<div>{time}</div>
<button onClick={toggleStart}>{start ? "Stop" : "Start"}</button>
</>
)
}