Obsidian_Note/React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md

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，不然就执行