From 5c8599051947c6ddba14aefe60e0a6cdef27cbac Mon Sep 17 00:00:00 2001 From: YuJian Date: Tue, 26 Apr 2022 16:27:42 +0800 Subject: [PATCH] vault backup: 2022-04-26 16:27:42 --- .../React 的流程解析 - commit阶段.md | 28 +++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) 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