在 React 中，父子组件的生命周期执行顺序遵循一个清晰的规律：父组件先准备，子组件再挂载；子组件先卸载，父组件再清理。
核心原则 ：渲染阶段由父到子（render 递归），提交阶段（DOM 更新）再由子到父（componentDidMount/Update 递归）。
一、初始挂载阶段（Mounting）
顺序：父组件 getDerivedStateFromProps / render → 子组件生命周期 → 父组件 componentDidMount
详细步骤（以类组件为例）：
- 父组件 ：
constructor - 父组件 ：
getDerivedStateFromProps - 父组件 ：
render
→ 此时解析出子组件实例，开始子组件的生命周期 - 子组件 ：
constructor - 子组件 ：
getDerivedStateFromProps - 子组件 ：
render - 子组件 ：
componentDidMount - 父组件 ：
componentDidMount
注意：
componentDidMount是子组件先执行，父组件后执行。
二、更新阶段（Updating）
触发条件：props 或 state 改变。
2.1 由父组件 state 变化引起的更新
- 父组件 ：
getDerivedStateFromProps - 父组件 ：
shouldComponentUpdate - 父组件 ：
render
→ 重新生成子组件，触发子组件更新 - 子组件 ：
getDerivedStateFromProps - 子组件 ：
shouldComponentUpdate - 子组件 ：
render - 子组件 ：
getSnapshotBeforeUpdate - 子组件 ：
componentDidUpdate - 父组件 ：
getSnapshotBeforeUpdate - 父组件 ：
componentDidUpdate
2.2 由子组件自身 state 变化引起的更新
只会触发子组件自身的更新生命周期，父组件不受影响（除非子组件通过回调修改父组件 state）。
三、卸载阶段（Unmounting）
顺序：父组件先标记卸载 → 子组件 componentWillUnmount → 父组件 componentWillUnmount
- 父组件：决定卸载子组件（例如条件渲染移除子组件）
- 子组件 ：
componentWillUnmount - 父组件 ：
componentWillUnmount
子组件先执行清理工作，父组件最后清理。
四、函数组件中的近似顺序（useEffect）
函数组件没有直接等价的生命周期，但 useEffect 的执行顺序模拟了部分行为：
| 阶段 | 类组件顺序 | 函数组件近似顺序 |
|---|---|---|
| 挂载 | 父 render → 子 render → 子 didMount → 父 didMount | 父 render → 子 render → 子 useLayoutEffect → 父 useLayoutEffect → 子 useEffect → 父 useEffect |
| 更新 | 父 render → 子 render → 子 didUpdate → 父 didUpdate | 类似，但 cleanup 在上一次 effect 之前执行 |
| 卸载 | 子 willUnmount → 父 willUnmount | 子 useEffect cleanup → 父 useEffect cleanup |
注意：
useEffect是在浏览器完成布局与绘制之后 异步执行，所以useEffect中父子顺序仍然是子先于父（因为组件树是深度优先渲染的）。
五、关键总结
- 挂载 ：父
render先完成，但父componentDidMount要等所有子组件挂载完才执行。 - 更新 ：父
render先执行，然后子组件更新，最后父componentDidUpdate。 - 卸载 ：子组件先执行
componentWillUnmount，父组件最后执行。 - 函数组件 ：
useEffect的顺序是子先于父，但执行时间点在布局/绘制之后。
这个顺序保证了：
- 子组件在父组件访问它们之前已经准备好（或已清理）
- DOM 测量/滚动位置等操作可以在合适的时机进行