React Fiber 的执行流程

[nmsn]

如题

[nmsn]

总结

React Fiber 的执行流程包括初始化阶段、任务调度阶段、协调阶段（Reconciliation 和 Commit）、完成阶段等，通过优先级调度器、协调算法、diff 算法等来提高 React 应用的性能和响应速度。

详细步骤

React Fiber 是 React 的一种新的协调引擎，其执行流程如下：

初始化阶段：React Fiber 通过调用 render() 方法来生成虚拟 DOM 树，并将其存储在 Fiber 节点中。在这个阶段，React Fiber 还会创建一些全局变量，如 workInProgressRoot、nextUnitOfWork 等，用于记录当前的工作进度和任务单元。

任务调度阶段：React Fiber 通过优先级调度器（Priority Scheduler）来决定当前要执行的任务单元。每个任务单元都是一个 Fiber 节点，记录了该任务的类型、状态、子节点等信息。React Fiber 将任务单元按照优先级分为多个批次（Batch），每个批次包含一组任务单元。React Fiber 首先会执行高优先级的批次，然后执行低优先级的批次。

协调阶段：在每个任务单元执行前，React Fiber 会检查该任务单元是否需要更新。如果需要更新，则会进入协调阶段，根据当前节点和子节点的状态来决定该任务单元的执行方式。协调阶段分为两个步骤：Reconciliation 和 Commit。

Reconciliation 阶段：React Fiber 通过遍历 Fiber 树来比较新旧虚拟 DOM 的差异，找出需要更新的节点，并标记这些节点为“脏节点”。React Fiber 通过 diff 算法来比较新旧虚拟 DOM 的差异，尽可能地重用已有的节点，从而减少 DOM 操作的次数。

Commit 阶段：在 Reconciliation 阶段完成后，React Fiber 会进入 Commit 阶段，将所有“脏节点”更新到真实的 DOM 上。在 Commit 阶段，React Fiber 会调用各个生命周期方法，如 componentDidMount、componentDidUpdate 等，以完成组件的更新和挂载。

完成阶段：在 Commit 阶段完成后，React Fiber 将当前的工作进度标记为完成，并将结果返回给调用者。如果还有未完成的任务单元，React Fiber 会继续执行任务调度和协调阶段，直到所有任务都完成。