1
0
Fork 0
Browse Source

vault backup: 2022-04-26 15:27:42

master
YuJian 3 years ago
parent
commit
5aed5c89ae
  1. 9
      React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md

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

@ -4,3 +4,12 @@ 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 中发生的变化~~如果我不懒的话~~ commitRoot 的代码很少,其中最主要的是执行 commitRootImpl 函数,也就是说 commit 阶段最核心的任务就发生在 commitRootImpl 中,在 React 18 中,commitRootImpl 函数发生了比较大的变化,以往 17 中,主要有三个循环,这三个循环主要代表了 commit 的阶段的三个时刻:分别是 before、mutation 和 layout,也对应了三个函数 commitBeforeMutationEffect、commitMutationEffects 和commitLayoutEffects,18 中这三个函数依旧存在,但已经不是在循环被执行了,以下的文章内容会先从 React 17 开始,然后再探讨在 React 18 中发生的变化~~如果我不懒的话~~
进入 commitRootImpl 函数内部,首先会执行一个 do..while 循环
```javascript
do {
flushPassiveEffects();
} while (rootWithPendingPassiveEffects !== null);
```
这个循环的跳出条件是 rootWithPendingPassiveEffects 等于 null,
Loading…
Cancel
Save