React 18.2 源码解析：深入剖析初始化阶段（下）

scheduleUpdateOnFiber：将更新计划到 Fiber 节点上

在 React 18.2 中，更新的调度是由 scheduleUpdateOnFiber 函数负责的。该函数的作用是将更新计划到 Fiber 节点上，以便在后续的渲染阶段进行处理。

scheduleUpdateOnFiber 函数的第一个参数是 Fiber 节点，第二个参数是更新对象。更新对象是一个包含新状态或属性值的对象，它将被应用到 Fiber 节点上。

scheduleUpdateOnFiber 函数首先会检查 Fiber 节点的类型。如果是函数组件，则会将更新对象添加到该组件的更新队列中。如果是类组件，则会调用该组件的 componentDidUpdate 方法，并传入更新对象作为参数。

performSyncWorkOnRoot 和 performConcurrentWorkOnRoot：渲染阶段的两个关键函数

在 React 18.2 中，渲染阶段由两个函数负责：performSyncWorkOnRoot 和 performConcurrentWorkOnRoot。

performSyncWorkOnRoot 函数用于同步渲染，即立即执行所有更新并更新 DOM。该函数通常用于处理用户交互或其他需要立即响应的更新。

performConcurrentWorkOnRoot 函数用于并发渲染，即同时执行多个更新并逐步更新 DOM。该函数通常用于处理后台任务或其他不那么紧急的更新。

performSyncWorkOnRoot 和 performConcurrentWorkOnRoot 这两个函数都遵循相同的流程：

1. 首先，它们会检查 Fiber 节点的类型。如果是函数组件，则会调用该组件的 render 方法，并传入 props 和 state 作为参数。如果是类组件，则会调用该组件的 render 方法，并传入 props、state 和 context 作为参数。
2. 然后，它们会根据 Fiber 节点的类型和更新类型，决定是否需要更新 DOM。如果需要更新 DOM，则会调用相应的 DOM API 来更新 DOM 节点。
3. 最后，它们会继续遍历 Fiber 树，并对每个 Fiber 节点重复上述步骤，直到所有更新都已处理完毕。

结语

在本文中，我们深入探讨了 React 18.2 初始化阶段的最后一步：scheduleUpdateOnFiber。我们了解了该函数是如何工作的，以及它是如何将更新计划到 Fiber 节点上的。同时，我们还探讨了 performSyncWorkOnRoot 和 performConcurrentWorkOnRoot 这两个函数，它们在 React 18.2 的渲染阶段发挥着关键作用。