useEffect的回调函数的return语句何时执行？

10 浏览
0 Comments

useEffect的回调函数的return语句何时执行？

我想澄清一下我对这里发生的事情的理解。欢迎提供任何细节来改善我的理解。

function Timer() {
  let [time, setTime] = useState(5);
  useEffect(() => {
    let timer = setInterval(() => {
      setTime(time - 1);
    }, 1000)
    return () => clearInterval(timer);
  }, );
  return {time}
}
export default Timer

[https://codesandbox.io/s/cranky-chaplygin-g1r0p](https://codesandbox.io/s/cranky-chaplygin-g1r0p)

  1. 将`time`初始化为`5`。
  2. 读取`useEffect`，它的回调函数将在稍后执行。
  3. 渲染`div`。
  4. 执行`useEffect`的回调函数。设置`setInterval`的回调函数准备触发。当然，此时`useEffect`的`return`语句不会执行，因为如果执行了，将会取消定时器（而定时器确实在工作）。
  5. 大约1秒后，`setInterval`的回调函数触发，改变`time`的状态（变为4）。
  6. 现在，某个状态已经改变，函数被重新执行。将新的时间状态初始化为新的变量`time`。
  7. 读取新的`useEffect`，它的回调函数将在稍后执行（这是因为`useEffect()`没有第二个参数）。
  8. 执行组件函数的`return`语句。这实际上重新渲染了`div`。
  9. 在某个时间点，之前的`useEffect`的`return`语句执行（这会禁用之前的`useEffect`中的定时器）。我不确定这是何时发生的。
  10. 执行“新”的`useEffect`的回调函数。
0