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

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

@@ -80,4 +80,43 @@ do {
 
 这个循环内部由 invokeGuardedCallback 执行 commitBeforeMutationEffects 函数，commitBeforeMutationEffects 就是开头说到的负责 before 阶段的函数，具体函数的深入可以看 [[React 的深入探索 - commitBeforeMutationEffect]]
 
-然后根据 hasCaughtError 函数的返回值，执行 captureCommitPhaseError 函数，这个函数和 React 的 Error Boundaries （错误边界）有关，这里不展开谈
+然后根据 hasCaughtError 函数的返回值，执行 captureCommitPhaseError 函数，这个函数和 React 的 Error Boundaries （错误边界）有关，这里不展开谈，后边的两个阶段的逻辑里边也有着类似的逻辑，从这里可以看出来，Error Boundaries 会捕获 commit 阶段的错误
+
+循环的跳出条件是 nextEffect 等于 null，也就是这个循环会遍历 effectList，后边的两个主要循环的跳出条件也是相同的
+
+跳出 before 阶段的循环之后进入第二个主要循环：mutation
+
+```javascript
+do {
+{
+invokeGuardedCallback(
+	null,
+	commitMutationEffects,
+	null,
+	root,
+	renderPriorityLevel
+);
+ 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);
+```