diff --git a/React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md b/React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md index 9c7ab5a..0630bbf 100644 --- a/React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md +++ b/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(); -``` \ No newline at end of file +``` + +至此, React 17 中 commit 阶段发生的事情就结束了 + + + +## React 18 +**TODO** \ No newline at end of file diff --git a/React 的源码深入/React 的流程解析 - commit 阶段/React 的深入探索 - commitBeforeMutationEffect.md b/React 的源码深入/React 的流程解析 - commit 阶段/React 的深入探索 - commitBeforeMutationEffects.md similarity index 100% rename from React 的源码深入/React 的流程解析 - commit 阶段/React 的深入探索 - commitBeforeMutationEffect.md rename to React 的源码深入/React 的流程解析 - commit 阶段/React 的深入探索 - commitBeforeMutationEffects.md