React 的视图渲染可以看做，UI = Fn(State);

React 这个函数 Fn 接受全局状态 State 作为参数，这个函数调用的结果就是我们当前视图的 UI。

在 React 的源码中 State 这部分负责计算出状态变化，Fn 负责将状态变化渲染在视图中。

• State 对应 Reconciler(diff)，负责找出变化的组件，也就是我们所说的 Render 阶段。
• Fn 对应 Renderer，负责将变化的组件渲染到页面上，也就是我们所说的 Commit 阶段。

生命周期

在 Render 阶段和 Commit 阶段中，会执行所有的生命周期函数。 根据阶段和状态进行划分，我们可以得到下图：

标红为已经在 React17 中被废弃了，替代它们的为标绿的部分，同时使用标红与标绿会报错。

在首屏渲染时，一个组件首先会调用 constructor，接下来会调用getDerivedStateFromProps/componentWillMount，然后调用 render，当整个 Render 阶段完成后会进入 Commit 阶段，当完成了对应的 DOM 渲染之后，最后调用 componentDidMount。

用户在调用比如 setState 更新状态时，我们会重新进入 Render 阶段，React 会通过深度优先遍历的方式创建一颗完整的Fiber 树，当 Reconciler(Diff 算法 (opens in a new tab))发现某个节点发生了变化时，会将这个节点进行标记，当整个 Reconciler 完成后，会进入 Commit 阶段，Commit 阶段会根据 Fiber 树的标记，对页面进行更新。当执行完以后，新创建的 Fiber 树会替换掉之前那一颗 Fiber 树。等待下一次 setState 再生成一颗新的 Fiber 树。

Render 阶段与 Commit 阶段传递的是一条包含了不同 Fiber 阶段的 Effect 链表。

参考资料

https://www.bilibili.com/video/BV16t4y1r7oJ (opens in a new tab)