Question

我正在使用此useEffect来显示UI加载...，但仅在250ms之后。它可以工作...但是我真的不明白为什么，特别是useEffect为何以及何时调用return函数（清除超时）。

好吧...我不确定这是否完美。有时应该出现“正在加载...”，但实际上没有。

 const [loadingAfterShortTime, setLoadingAfterShortTime] = useState(false);

 useEffect(() => {
  setLoadingAfterShortTime(bool => false);
  if (myDepandanceToTrigTheLoadingWord === true) {
    const id = setTimeout(() => {
      setLoadingAfterShortTime(bool => true);
    }, 250);
    return () => {
      clearTimeout(id);
    };
  }
}, [myDepandanceToTrigTheLoadingWord]);

Answer 1

@Powell Ye提供的解释很好，但是特别是在谈到重新渲染时（例如，当道具改变时）有一些错误信息

考虑以下一些简单的组成部分

ngOnInit

说道具传递的变化，你可能会以为这样

“清理”
新道具
“正在呈现...”
“已应用效果”

但是，实际上会发生以下情况

新道具
“正在呈现...”
“清理”
“已应用效果”

也就是说，清理功能运行之后新的渲染/绘画，但是之前应用了“新”效果，docs可以是对此含糊不清

在执行下一个效果之前先清理上一个效果

这样做是出于性能原因=>，这样渲染就不会延迟（对我而言有时也会令人沮丧）

Answer 2

以下是有关计时的概述：

useEffect在初始渲染时被调用，并且任何依赖于更改的值都会被调用。通常，它在渲染完成后触发。如果您从基于类的组件的角度来考虑它，则等效的方法是componentDidMount方法。
从useEffect内部返回的函数在从UI删除组件或即将重新呈现之前被调用（以避免内存泄漏）。在执行下一个效果之前，总是先清理上一个效果。确保可以在任何新渲染之前运行。等效为componentWillUnmount。

示例

让我们假设有一个useEffect，它几乎没有由道具（传递给我们的组件）和清除函数构成的依赖项。在第一个渲染上，将发生以下情况：

一旦安装了组件，效果体内的代码将运行；
清除功能保持不变，可以在组件重新渲染/从屏幕上移除之前准备好运行。

现在，其中一个道具发生变化，从而触发了重新渲染。由于它被列为useEffect所依赖的东西，因此效果将重新执行，如下所示：

清除功能在新的渲染周期之前运行；
渲染完成后，效果体内的代码将运行；
再次创建新的清理功能，可以在从屏幕上重新渲染/移除组件之前准备执行。

Answer 3

根据react文档

Cleaning up an effect

清除功能在从UI删除组件之前运行以防止内存泄漏。此外，如果某个组件多次渲染（通常如此），则在执行下一个效果之前，将清除上一个效果。

Timing of effects

React始终会先刷新以前渲染的效果，然后再开始新更新。

根据我对这两个引号的理解，清理是在应用效果之后且卸载（从UI中删除）之前进行。

将useEffect与依赖项结合使用时，何时触发清除功能？

3 个答案:

示例