React的原理

在Layout阶段，React允许组件读取最新的布局信息，并在浏览器将新布局绘制到屏幕前进行额外的DOM操作。该阶段发生在DOM突变后，浏览器绘制之前。

React的Mutation阶段的主要职责就是将虚拟DOM应用到真实DOM中，它会针对不同的节点进行不同的处理。

Before Mutation阶段的主要职责是：执行在DOM变更之前的可能需要处理的副作用操作，针对不同组件调用不同的处理函数。

commit阶段是React渲染流程的最后阶段，该阶段是不可中断的，主要职责就是将Fiber渲染为真实DOM节点，绘制到页面中。

React的render阶段的主要职责就是调用beinWork函数处理更新并构建新的Fiber树，调用completeWork创建DOM树，为commit阶段做准备。

当React页面首次渲染，或者当组件的state和props发生变化时，就会触发更新，React处理更新包括render和commit两个阶段。

React diff算法，也称为Reconciliation协调算法，是React用来比较新旧虚拟DOM树，并找出最小差异以更新真实DOM的核心机制。

虚拟DOM是一个用来表示真实DOM的JS对象，虚拟DOM的引入保证了React的性能下限，通过diff算法找出需要更新的节点，避免了大量无谓的计算。

React Fiber引入了时间切片与优先级的概念，将渲染工作拆分成多个较小的任务单元，可以更好地管理渲染优先级、中断与恢复，并使得React能够更有效地利用浏览器的主线程。

React的首次渲染实现：当我们创建一个应该调用createRoot以及render函数究竟做了哪些事情？