diff --git a/React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md b/React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md index 3c15c2f..a1b71b1 100644 --- a/React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md +++ b/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 的第二个循环 \ No newline at end of file +最终走到 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 + +``` \ No newline at end of file