React渲染流程

在 React 渲染分为两个阶段，Render 和 Commit，Render 是修改 React 组件的状态，把需要更新的组件标记为待更新，在 Commit 阶段将待更新的组件进行渲染并最终更新到浏览器的 Dom 树中。

Render 阶段是可以并执行操作的，组件状态如有变更，保留新的状态，抛弃老的状态，这个阶段就是虚拟 Dom 更新阶段，不是简单销毁并重新构建，而是通过一系列比较算法只更新有变化的属性。

Commit 阶段是同步执行的，该阶段是进行最终的 Dom 渲染，在最终渲染页面之前会执行组件的useLayoutEffects方法。

下图中描述了渲染流程。

页面初次渲染完成之后，通过 useState 或者 useReducer 进行数据的更新从而使得 UI 进行再次渲染。React 通过 Batch 方式将所有的数据更新整合在一起，而不是每次都进行更新。这个Batch 机制只是针对 React 的事件，而不会对浏览器的事件进行整合，例如按钮点击这种用户的主动行为。

React 通过底层 Fiber 架构进行组件的状态管理以及更新。React Fiber 是 React 内部的一种协调算法，用于提高 React 应用的性能和灵活性，以后可以具体看一 Fiber 的工作原理。