React 父子组件中 useEffect 的正确执行顺序是什么？

Question

例如，如果我有组件 A 和 B，并且组件 B 是组件 A 的子级：

<A>
  <B />
</A>

在 A 中，我们有：

useEffect(() => {
  console.log('Parent A useEffect')
})

在 B 中，我们有：

useEffect(() => {
  console.log('Child B useEffect')
})

我做了一些测试，我看到了两件事：

1. 在第一次加载时（例如在 F5 之后），日志结果是：

父 A 使用效果

儿童B使用效果

2. 如果我们转到另一个组件，然后又回到组件 B（例如，不是通过重新加载而是通过使用 react-router），则日志结果为：

儿童B使用效果

父 A 使用效果

在两种情况下，结果是相反的。这让我有点困惑。

我搜索了谷歌componentDidMount，我发现了这个：https : //github.com/facebook/react/blob/v15.0.1/docs/docs/ref-03-component-specs.md#mounting-componentdidmount

componentDidMount()子组件的方法先于父组件调用。

但我找不到有关的相应文档 useEffect

那么useEffect父/子组件中正确的执行顺序是什么？

Answer 1

好的，我会尽力消除您的困惑。如果你有一些这样的组件

<A>
 <B />
</A>

然后在第一次加载（重新加载）日志中

儿童B使用效果

父 A 使用效果

然后假设您导航到某个路线，然后转到子组件日志将是

儿童B使用效果

不会调用父 useEffect。

正如反应文档所说

您可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

所以所有这些生命周期方法都在组件安装后被调用，当组件被安装时，该组件内的子组件已经被安装并且它们的生命周期已经被调用

沙盒让您了解 useEffect 是如何调用的，它有 Roster 作为 Parent 和 Schedule 作为孩子。如果您导航到 Header 并返回到 Schedule 只有它的 useEffect 被调用。

在您的情况下，当您导航到子组件时，可能会调用 Parent useEffect ，但那是因为其他一些原因，也许您有一些回调设置了 Parent 状态，从而导致它的 useEffect 被调用，但我们正在讨论 useEffect 是如何工作的一般情况

希望能帮助到你