пытаясь понять метод componentDidMount (), когда дело доходит до вложенных компонентов

Question

Я пытаюсь понять, как реагируют ловушки жизненного цикла, и столкнулся с проблемой с ловушкой componentDidMount ().

Предположим, вы отображаете список компонентов. Метод componentDidMount () для каждого элемента списка всегда запускается в конце после того, как все элементы списка отрисованы. Почему он не сработал в начале для каждого предмета?

Это мой метод render () в моем корневом компоненте приложения

  render() {
    return (
      <div className="App">
        <A>
          <A1 />
          <A2 />
        </A>
        <B>
          <B1 />
          <B2 />
        </B>
      </div>
    );
  }
}

структура одного компонента A, A1, A2, B, B1, B2 все выглядит одинаково, отличается только имя.

import React, { Component } from "react";

class A extends Component {
  constructor(props) {
    super(props);

    this.state = {};

    console.log(" [A.js] constructor()");
  }

  componentWillMount() {
    console.log(" [A.js] ComponentWillMount()");
  }

  componentDidMount() {
    console.log(" [A.js] ComponentDidMount()");
  }

  render() {
    console.log(" [A.js] render()");
    return <div>{this.props.children}</div>;
  }
}

export default A;

и я написал консольные журналы внутри каждого метода во всех компонентах. А ниже скриншот, который я получил. https://snag.gy/wyi5Ta.jpg

на скриншоте мы получаем

[App.js] constructor()
[App.js] componentWillMount()
[App.js] render()
 [A.js] constructor()
 [A.js] ComponentWillMount()
 [A.js] render()
  [A1.js] constructor()
  [A1.js] ComponentWillMount()
  [A1.js] render()
  [A2.js] constructor()
  [A2.js] ComponentWillMount()
  [A2.js] render()
 [B.js] constructor()
 [B.js] ComponentWillMount()
 [B.js] render()
  [B1.js] constructor()
  [B1.js] ComponentWillMount()
  [B1.js] render()
  [B2.js] constructor()
  [B2.js] ComponentWillMount()
  [B2.js] render()
  [A1.js] ComponentDidMount()
  [A2.js] ComponentDidMount()
 [A.js] ComponentDidMount()
  [B1.js] ComponentDidMount()
  [B2.js] ComponentDidMount()
 [B.js] ComponentDidMount()
[App.js] componentDidMount()

я ожидал

[App.js] constructor()
[App.js] componentWillMount()
[App.js] render()
 [A.js] constructor()
 [A.js] ComponentWillMount()
 [A.js] render()
  [A1.js] constructor()
  [A1.js] ComponentWillMount() <---
  [A1.js] render()
  [A1.js] ComponentDidMount()
  [A2.js] constructor()
  [A2.js] ComponentWillMount() <---
  [A2.js] render()
  [A2.js] ComponentDidMount()
 [A.js] ComponentDidMount() <---
 [B.js] constructor()
 [B.js] ComponentWillMount()
 [B.js] render()
  [B1.js] constructor()
  [B1.js] ComponentWillMount()
  [B1.js] render()
  [B1.js] ComponentDidMount() <---
  [B2.js] constructor()
  [B2.js] ComponentWillMount()
  [B2.js] render()
  [B2.js] ComponentDidMount() <---
 [B.js] ComponentDidMount()
[App.js] componentDidMount()

Я поместил стрелки там, где ожидал, что метод componentDidMount () сработает. В чем причина этого?

Я не смог найти точного ответа на этот вопрос. Я также обнаружил, что реакция выполняется методом обхода «Поиск в глубину». Я смотрел несколько видео, но не мог понять эту загадку. Может кто-нибудь объяснить, пожалуйста? Я изо всех сил пытался понять это. Спасибо.