时间戳

首页 > 解决方案 > useEffect 的回调的 return 语句什么时候执行？

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

问题描述

我想澄清一下我对这里发生的事情的理解。任何能提高我目前理解的细节都将不胜感激。

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/craky-chaplygin-g1r0p

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

标签： javascriptreactjsreact-hooks

解决方案

功能组件在其状态更改后是否“卸载”，这是否会导致先前的 useEffect 回调返回语句执行？

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

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

组件何时卸载？

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

您能否帮助我理解，一般而言或在我的问题中的示例中，useEffect 的 return 语句何时执行？

取决于 dep 数组：

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

深入查看后续问题useEffect / useEffect?

推荐阅读