useEffect 的回调的 return 语句什么时候执行？

Question

我想澄清我对这里发生的事情的理解。任何改善我目前理解的细节将不胜感激。

function Timer() {

    let [time, setTime] = useState(5);

    useEffect(() => {
        let timer = setInterval(() => {
          setTime(time - 1);
        }, 1000)
        return () => clearInterval(timer);
    }, );

    return <div>{time}</div>
}

export default Timer

https://codesandbox.io/s/cranky-chaplygin-g1r0p

1. time正在初始化为5.
2. useEffect已读。它的回调必须准备好稍后触发。
3. 该div呈现。
4. useEffect的回调被执行。setInterval的回调准备好触发。当然useEffect'sreturn语句不会在这里触发，因为如果它触发它会取消计时器（并且计时器确实有效）。
5. 大约 1 秒后，setInterval的回调触发将time( 到 4)的状态更改。
6. 现在一个状态发生了变化，函数被重新执行。time，一个新变量，被初始化为新的时间状态。
7. useEffect读取一个新的，它的回调准备稍后触发。（发生这种情况是因为没有 的第二个参数useEffect()）。
8. 执行组件函数的return语句。这有效地重新渲染了div.
9. 在某些时候，前一个useEffect的return语句会执行（这会禁用timer前一个中的useEffect）。我不确定什么时候会发生这种情况。
10. 'new'useEffect的回调被执行。

Answer 1

您对事件顺序的理解是正确的。唯一缺少的是效果回调和清理的精确时间。

当组件重新渲染时，任何useEffects 都将分析其依赖项数组的变化。如果发生了变化，那么效果回调将会运行。这些回调保证按照它们在组件中声明的顺序运行。例如，下面的a始终会在 之前记录b。

const App = () => {
    const [num, setNum] = React.useState(0);
    React.useEffect(() => {
      setInterval(() => {
        setNum(num => num + 1);
      }, 1000);
    }, []);
    React.useEffect(() => {
      console.log('a', num);
    }, [num]);
    React.useEffect(() => {
      console.log('b', num);
    }, [num]);
    return num;
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

这些效果回调将在浏览器重新绘制后不久运行。

现在将效果清理回调添加到组合中。这些将始终在渲染运行的效果回调之前同步运行。例如，假设组件从渲染 A 开始，并且在渲染 A 中，效果挂钩返回了清理回调。然后，一些状态发生变化，并且发生到渲染 B 的转换，并且存在useEffect包含状态变化的依赖性数组。将会发生的是：

• 对于渲染 B，将使用新的 props/state 调用功能组件
• 该组件在函数末尾返回新的标记
• 如有必要，浏览器会重新绘制屏幕
• 渲染 A 中的清理函数将运行
• 渲染 B 的效果回调将运行

您可以在此处查看最后两个操作的源代码：

commitHookEffectListUnmount(Passive$1 | HasEffect, finishedWork);
commitHookEffectListMount(Passive$1 | HasEffect, finishedWork);

第一个调用会调用先前渲染中的所有清理回调。第二次调用调用当前渲染的所有效果回调。当前渲染效果回调在执行之前的渲染清理回调后同步运行。

Answer 2

功能组件在其状态发生变化后是否“卸载”，这是否会导致之前的 useEffect 回调返回语句执行？

不，组件在其生命周期结束时仅卸载一次，React 允许useEffect通过提供一个带有return语句的空 dep 数组来执行带有钩子的回调：

useEffect(() => {
  return () => {
    console.log("unmounts");
  };
}, []);

组件何时卸下？

当它的父级停止渲染它时。请参阅条件渲染。

你能帮我理解，一般来说还是在我的问题中的例子中，useEffect 的 return 语句何时执行？

取决于 dep 数组：

• 如果它是空的[]，则卸载。
• 如果它有依赖项[value1,value2]，则依赖项会发生变化（浅比较）。
• 如果它没有依赖项（没有第二个参数useEffect），它会在每次渲染时运行。

请参阅后续问题useEffect 深入/useEffect 的使用？