vault backup: 2022-04-26 17:17:44

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

@@ -4,6 +4,8 @@ commitRoot 在 React 18 的代码和 React 17 有着较大的不同，但是最
 
 commitRoot 的代码很少，其中最主要的是执行 commitRootImpl 函数，也就是说 commit 阶段最核心的任务就发生在 commitRootImpl 中，在 React 18 中，commitRootImpl 函数发生了比较大的变化，以往 17 中，有三个主要的循环，这三个循环主要代表了 commit 的阶段的三个时刻：分别是 before、mutation 和 layout，也对应了三个函数 commitBeforeMutationEffect、commitMutationEffects 和commitLayoutEffects，18 中这三个函数依旧存在，但已经不是在循环被执行了，以下的文章内容会先从 React 17 开始，然后再探讨在 React 18 中发生的变化~~如果我不懒的话~~
 
+commitRootImpl 内部有许多名字中带有 Interactive 的函数，这些函数逻辑和性能追踪有关，这篇文章里面会直接跳过
+
 进入 commitRootImpl 函数内部，首先会执行一个 do..while 循环
 
 ```javascript
@@ -186,4 +188,26 @@ if (rootDoesHavePassiveEffects) {
 		nextEffect = nextNextEffect;
 	}
 }
+```
+
+从官方留下的注释中可以明白，这一段代码主要是是否进入了无限循环的更新当中
+
+```javascript
+if (remainingLanes === SyncLane) {
+	// Count the number of times the root synchronously re-renders without
+	// finishing. If there are too many, it indicates an infinite update loop.
+	// 翻译：计算根节点未完成同步重新呈现的次数。如果有太多，则表示无限更新循环。
+	if (root === rootWithNestedUpdates) {
+		nestedUpdateCount++;
+	} else {
+		nestedUpdateCount = 0;
+		rootWithNestedUpdates = root;
+	}
+} else {
+	nestedUpdateCount = 0;
+}
+```
+
+```javascript
+ensureRootIsScheduled(root, now());
 ```