Каков правильный порядок выполнения useEffect в родительских и дочерних компонентах React?

Question

Например, если у меня есть компоненты A и B, а компонент B является дочерним для компонента A:

<A>
  <B />
</A>

Внутри A мы имеем:

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

Внутри B мыhave:

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

Я провел несколько тестов и увидел 2 вещи:

1. При первой загрузке (например, после F5) результат журнала:

Родитель A useEffect

Дочерний B useEffect

Если мы перейдем к другому компоненту, а затем вернемся к компоненту B (не путем перезагрузки, а, например, с помощью response-router), результат журнала будет:

Child BuseEffect

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 в parent / child? компоненты

Answer 1

Хорошо, я попытаюсь очистить ваше замешательство. Если у вас есть такие компоненты, как этот

<A>
 <B />
</A>

, то при первой загрузке (перезагрузке) журнал будет

Child B useEffect

Parent A useEffect

Затем допустим, что вы перейдете к какому-нибудь маршруту и ​​перейдете к журналу дочерних компонентов:

Дочерний B useEffect

Родительский useEffect не будет вызван.

Как говорит реагирующий документ

, вы можете думать об использовании Effect Hook как компонентDidMount, componentDidUpdate и componentWillUnmount вместе.

Так что все этиМетоды жизненного цикла вызываются после того, как компонент смонтирован, и когда компонент смонтирован, дочерние компоненты внутри этого компонента уже были смонтированы, а их жизненный цикл уже был вызван

Песочница , чтобы дать вам представление о том, какВызывается useEffect, у него есть Roster как родительский элемент и Schedule как дочерний элемент. если вы переходите к заголовку и возвращаетесь только к расписанию, вызывается только useEffect.

В вашем случае, возможно, родительский useEffect вызывается при переходе к дочернему компоненту, но это по какой-то другой причине, возможно, у вас есть обратный вызовкоторый устанавливает родительское состояние и, таким образом, вызывает его useEffect, но мы говорим о том, как работает useEffect в общем случае

Надеюсь, это поможет

Answer 2

, если вы хотите, чтобы useEffect вел себя как componentDidMount(), просто передайте [] в качестве второго аргумента после аргумента обратного вызова.

useEffect(()=>{
// this we executed once the component is mounted (mimic the componentDidMount)
},[])

, так что useEffect введено вместо использования componentDidMountили componentDidUpdate, поэтому в приведенных выше случаях при перезагрузке он ведет себя как componentDidMount, а во втором случае, когда компонент уже смонтирован и вы вернулись назад, он ведет себя как componentDidUpdate.

, если вы серьезно относитесь кв журнале консоли для этого я бы сказал, что useEffect вызывает обратный вызов (первый аргумент) в асинхронном веществе

из реагирующего документа

В отличие от componentDidMount илиcomponentDidUpdate, эффекты, запланированные с useEffect, не блокируют браузер от обновления экрана. Это делает ваше приложение более отзывчивым. Большинство эффектов не должно происходить синхронно.