vault backup: 2022-04-26 17:27:38

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

@@ -6,6 +6,8 @@ commitRoot 的代码很少，其中最主要的是执行 commitRootImpl 函数
 
 commitRootImpl 内部有许多名字中带有 Interactive 的函数，这些函数逻辑和性能追踪有关，这篇文章里面会直接跳过
 
+## React 17
+
 进入 commitRootImpl 函数内部，首先会执行一个 do..while 循环
 
 ```javascript
@@ -99,7 +101,7 @@ do {
 } while (nextEffect !== null);
 ```
 
-这个循环内部由 invokeGuardedCallback 执行 commitBeforeMutationEffects 函数，commitBeforeMutationEffects 就是开头说到的负责 before 阶段的函数，具体函数的深入可以看 [[React 的深入探索 - commitBeforeMutationEffect]]
+这个循环内部由 invokeGuardedCallback 执行 commitBeforeMutationEffects 函数，commitBeforeMutationEffects 就是开头说到的负责 before 阶段的函数，具体函数的深入可以看 [[React 的深入探索 - commitBeforeMutationEffects]]
 
 然后根据 hasCaughtError 函数的返回值，执行 captureCommitPhaseError 函数，这个函数和 React 的 Error Boundaries （错误边界）有关，这里不展开谈，后边的两个阶段的逻辑里边也有着类似的逻辑，从这里可以看出来，Error Boundaries 会捕获 commit 阶段的错误
 
@@ -218,4 +220,11 @@ React 内会存在一些同步的更新（useLayoutEffect 中的触发更新）
 
 ```javascript
 flushSyncCallbackQueue();
-```
+```
+
+至此， React 17 中 commit 阶段发生的事情就结束了
+
+
+
+## React 18
+**TODO**