Reactjs 当涉及嵌套组件时，很难理解componentDidMount（）方法

我试图理解react生命周期钩子，但遇到了componentDidMount（）生命周期钩子的问题

假设您正在呈现组件列表。每个列表项的componentDidMount（）方法始终在呈现所有列表项后的末尾激发。为什么它没有在每一个项目的开始发射

这是我的根应用程序组件中的render（）方法

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

我期待着

[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()

[App.js]构造函数（）
[App.js]组件willmount（）
[App.js]render（）
[A.js]构造函数（）
[A.js]组件willmount（）
[A.js]render（）
[A1.js]构造函数（）
[A1.js]ComponentWillMount（）在安装React组件之前，会调用该组件的构造函数


UNSAFE\u componentWillMount（）
在装入之前被调用。它在
render（）
之前调用，因此在此方法中同步调用
setState（）
不会触发额外的渲染


componentDidMount（）
在装入组件（插入到树中）后立即调用


根据文档，一切都按预期进行<在将
[A1.js]
插入树之前，只需调用code>[B.js]render（）

。删除

[B.js]

和子项，它仍然可以工作

重要的是在装入子节点后调用父节点

componentDidMount

，否则将无法计算父节点的高度，例如，因为在触发

componentDidMount

时，父节点仍然为空

---

在安装React组件之前，会调用该组件的构造函数

UNSAFE\u componentWillMount（）

在装入之前被调用。它在

render（）

之前调用，因此在此方法中同步调用

setState（）

不会触发额外的渲染

componentDidMount（）

在装入组件（插入到树中）后立即调用

根据文档，一切都按预期进行<在将

[A1.js]

插入树之前，只需调用code>[B.js]render（）。删除

[B.js]

和子项，它仍然可以工作

重要的是在装入子节点后调用父节点

componentDidMount

，否则将无法计算父节点的高度，例如，因为在触发

componentDidMount

时，父节点仍然为空

---

显示a1组件的代码…我已经用它编辑了问题，请参考。感谢展示a1组件的代码…我已经用它编辑了问题，请参考。谢谢

[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()