React 父子组件中 useEffect 的正确执行顺序是什么? [英] What is the correct order of execution of useEffect in React parent and child components?

问题描述

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

<B/></A>

在 A 中，我们有:

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

在 B 中，我们有:

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

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

1. 在第一次加载时(例如在 F5 之后)，日志结果是:

<块引用>

Parent A useEffect

Child B useEffect

2. 如果我们去另一个组件然后又回到组件B(不是通过重新加载而是通过使用react-router，例如)，日志结果是:

<块引用>

Child B useEffect

Parent A useEffect

有两种情况，结果相反.这让我有点困惑.

我在 Google 上搜索了关于 componentDidMount 的内容，我发现了这个:https://github.com/facebook/react/blob/v15.0.1/docs/docs/ref-03-component-specs.md#mounting-componentdidmount

<块引用>

子组件的componentDidMount()方法在调用之前父组件.

但是我找不到关于useEffect

的相应文档

那么父/子组件中useEffect的正确执行顺序是怎样的?

解决方案

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

<B/></A>

然后在第一次加载(Reload)日志会

<块引用>

Child B useEffect

Parent A useEffect

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

<块引用>

Child B useEffect

不会调用父 useEffect.

正如反应文档所说

<块引用>

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

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

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

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

希望能帮到你

For example, if I have components A and B, and component B is the child of component A:

<A>
  <B />
</A>

Inside A we have:

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

Inside B we have:

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

I did some tests and I saw 2 things:

1. At the first load (after F5, for example), the log result is:

Parent A useEffect

Child B useEffect

2. If we go to another component and then come back to component B (not by reloading but by using react-router, for example), the log result is:

Child B useEffect

Parent A useEffect

In two cases, the results are reversed. This makes me a bit confused.

I searched Google about componentDidMount and I found this: https://github.com/facebook/react/blob/v15.0.1/docs/docs/ref-03-component-specs.md#mounting-componentdidmount

The componentDidMount() method of child components is invoked before that of parent components.

But I couldn't find the corresponding docs about useEffect

So what is the correct order of execution of useEffect in parent/child components?

解决方案

Ok I will try to clear your confusion. If you have some components like this

<A>
 <B />
</A>

Then on the first load (Reload) log will be

Child B useEffect

Parent A useEffect

Then lets say you navigate to some route and then go to Child component log will be

Child B useEffect

Parent useEffect won't be called.

As react doc says

you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

So all of these lifecycle methods are called after the component is mounted and when component is mounted the child components inside that component have already been mounted and their lifeCycle have been called already

Sandbox to give you an idea how useEffect is called, it has Roster as Parent and Schedule as child. if you navigate to Header and come back to Schedule only it's useEffect is called.

In your case maybe Parent useEffect is being called when you navigate to child component but that is because of some other reason maybe you have some callback that sets Parent state and thus cause it's useEffect to be called, but we are talking about how useEffect works in general case

Hope it helps

这篇关于React 父子组件中 useEffect 的正确执行顺序是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！