vault backup: 2022-04-26 16:27:42

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

@@ -2,7 +2,7 @@ React 的 commit 阶段从 commitRoot 这个函数开始，从 performSyncWorkOn
 
 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 中发生的变化~~如果我不懒的话~~
+commitRoot 的代码很少，其中最主要的是执行 commitRootImpl 函数，也就是说 commit 阶段最核心的任务就发生在 commitRootImpl 中，在 React 18 中，commitRootImpl 函数发生了比较大的变化，以往 17 中，有三个主要的循环，这三个循环主要代表了 commit 的阶段的三个时刻：分别是 before、mutation 和 layout，也对应了三个函数 commitBeforeMutationEffect、commitMutationEffects 和commitLayoutEffects，18 中这三个函数依旧存在，但已经不是在循环被执行了，以下的文章内容会先从 React 17 开始，然后再探讨在 React 18 中发生的变化~~如果我不懒的话~~
 
 进入 commitRootImpl 函数内部，首先会执行一个 do..while 循环
 
@@ -58,4 +58,28 @@ if (root === workInProgressRoot) {
 // 以下省略
 ```
 
-最终走到 commitRootImpl 的第二个循环
+最终走到 commitRootImpl 的第一个主要循环
+
+```javascript
+do {
+	{
+		 invokeGuardedCallback(null, commitBeforeMutationEffects, null);
+		 if (hasCaughtError()) {
+			 if (!(nextEffect !== null)) {
+				 {
+					 throw Error( "Should be working on an effect." );
+				 }
+			 }
+			 var error = clearCaughtError();
+			 captureCommitPhaseError(nextEffect, error);
+			 nextEffect = nextEffect.nextEffect;
+		 }
+	}
+} while (nextEffect !== null);
+```
+
+这个循环内部由 invokeGuardedCallback 执行 commitBeforeMutationEffects 函数，commitBeforeMutationEffects 就是开头说到的负责 before 阶段的函数，具体函数流程
+
+```javascript
+
+```