From 70126a13786b679a01371f4365e39f33794d11a6 Mon Sep 17 00:00:00 2001 From: YuJian Date: Tue, 26 Apr 2022 17:17:44 +0800 Subject: [PATCH] vault backup: 2022-04-26 17:17:44 --- .../React 的流程解析 - commit阶段.md | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md b/React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md index 0d35527..c726ea2 100644 --- a/React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md +++ b/React 的源码深入/React 的流程解析 - commit 阶段/React 的流程解析 - commit阶段.md @@ -4,6 +4,8 @@ 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 中发生的变化~~如果我不懒的话~~ +commitRootImpl 内部有许多名字中带有 Interactive 的函数,这些函数逻辑和性能追踪有关,这篇文章里面会直接跳过 + 进入 commitRootImpl 函数内部,首先会执行一个 do..while 循环 ```javascript @@ -186,4 +188,26 @@ if (rootDoesHavePassiveEffects) { nextEffect = nextNextEffect; } } +``` + +从官方留下的注释中可以明白,这一段代码主要是是否进入了无限循环的更新当中 + +```javascript +if (remainingLanes === SyncLane) { + // Count the number of times the root synchronously re-renders without + // finishing. If there are too many, it indicates an infinite update loop. + // 翻译:计算根节点未完成同步重新呈现的次数。如果有太多,则表示无限更新循环。 + if (root === rootWithNestedUpdates) { + nestedUpdateCount++; + } else { + nestedUpdateCount = 0; + rootWithNestedUpdates = root; + } +} else { + nestedUpdateCount = 0; +} +``` + +```javascript +ensureRootIsScheduled(root, now()); ``` \ No newline at end of file