React 生命周期图谱

介绍一下 React 的生命周期函数

假设我们有如下的 Dom 结构

<FC>
<InnerFC/>
</FC>
<Component>
<InnerComponent/>
</Compoennt>

那么在构建与刷新的过程中生命周期函数是如何执行的。先给出结论，具体的顺序如下
生命周期可以分为四个阶段：渲染阶段，提交前阶段，提交阶段，提交后阶段

• 渲染阶段可以理解为 render 函数执行结束前都算。主要的功能是 React VD 的刷新与构建。
  涉及到的钩子有：getDerivedStateFromProps,shouldUpdate,componentWillUpdate,render,componentWillMount,
• 提交前阶段，介于 render 函数之后，Dom 绘制之前，但是 Dom 的结构以及好了
  涉及到的钩子有：getSnapshotBeforeUpdate,
• 提交阶段，Dom 绘制之后，这个时候 Dom 以及稳定。
  涉及到的钩子：ComponentDidMount,componentDidUpdate,React.useLayoutEffect(),componentDidUnmount,
• 提交后阶段，这个阶段是 React.useEffect 执行的阶段。

---

组件渲染的顺序是，首先是分为四个阶段，

• 在渲染阶段,由上到下,由父到子，对每个组件一次性按顺序执行完所有改阶段的钩子，例如构建的时候，执行 getDerivedStateFromProps， componentWillMount,render, 刷新的时候执行 getDerivedStateFromProps,shouldUpdate,componentWillUpdate,render。
• 在其他的三个阶段，还是一样，由阶段进行分组，每个阶段内，将所有的组件的钩子都要一次性执行完。但是执行的顺序是由上到下，由子到父。

---

所以，我们可以将它们分为捕获阶段(渲染阶段)，冒泡阶段(提交前阶段,提交阶段,提交后阶段)。

下面就是上面例子的刷新图

创建渲染顺序

捕获阶段:

• FC
• innerFC
• Component:getDerivedStateFromProps,render
• InnerComponnet:getDerivedStateFromProps,render

冒泡阶段：

• innerFC: useLayoutEffect
• FC: useLayoutEffect
• innerComponent: componentDidMount
• Component:componentDidMount
• innerFC: useEffect
• FC: useEffect

刷新渲染顺序：

捕获阶段:

• FC:
• innerFC
• Component:getDerivedStateFromProps,shouldComponentUpdate,render,
• InnerComponnet:getDerivedStateFromProps,shouldComponentUpdate,componentWillUpdate,render,

冒泡阶段：

• innerComponent: getSnapshotBeforeUpdate
• Component:getSnapshotBeforeUpdate
• innerFC: useLayoutEffect
• FC: useLayoutEffect
• innerComponent: componentDidUpdate
• Component:componentDidUpdate
• innerFC: useEffect
• FC: useEffect