2.1 KiB
React 的 commit 阶段从 commitRoot 这个函数开始，从 performSyncWorkOnRoot 函数中被调用，接收一个名为 root 的参数，这个 root 就是从 Fiber 递归中完成递归流程的 WorkInProgress Fiber 树
commitRoot 在 React 18 的代码和 React 17 有着较大的不同，但是最终的目的都是类似的：调用 commitRootImpl 函数，在 React 17 中，commitRootImpl 和一个优先级一起作为参数交由 runWithPriority 函数，而 React 18 中则是直接执行 commitRootImpl 函数
commitRoot 的代码很少，其中最主要的是执行 commitRootImpl 函数，也就是说 commit 阶段最核心的任务就发生在 commitRootImpl 中，在 React 18 中，commitRootImpl 函数发生了比较大的变化，以往 17 中，主要有三个循环，这三个循环主要代表了 commit 的阶段的三个时刻：分别是 before、mutation 和 layout，也对应了三个函数 commitBeforeMutationEffect、commitMutationEffects 和commitLayoutEffects，18 中这三个函数依旧存在，但已经不是在循环被执行了，以下的文章内容会先从 React 17 开始，然后再探讨在 React 18 中发生的变化如果我不懒的话
进入 commitRootImpl 函数内部，首先会执行一个 do..while 循环
do {
flushPassiveEffects();
} while (rootWithPendingPassiveEffects !== null);
这个循环的跳出条件是 rootWithPendingPassiveEffects 等于 null，不然就执行 flushPassiveEffects 函数，那么 rootWithPendingPassiveEffects 是什么？为什么要执行 flushPassiveEffects 函数，这个 rootWithPendingPassiveEffects 就是在 completeWork 阶段生成的带有 effectTag 的链表 effectList，而 flushPassiveEffects 函数内部会遍历这个链表，然后执行其各自内部的 useEffect 中的回调函数，在 commitRootImpl 开头执行是因为这些回调函数有可能触发新的渲染，所以需要遍历直到没有任务
接下来会执行 flushRenderPhaseStrictModeWarningsInDEV 函数，这个函数从名字上看出之和开发环境下有关，负责 React 中的 StrictMode
flushRenderPhaseStrictModeWarningsInDEV();