From 1a9f00f71e73445ccaae4489a601e76f0dfd7116 Mon Sep 17 00:00:00 2001 From: YuJian920 Date: Sat, 16 Apr 2022 21:04:45 +0800 Subject: [PATCH] vault backup: 2022-04-16 21:04:45 --- React 的源码深入/React Reconciler - Fiber 创建.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/React 的源码深入/React Reconciler - Fiber 创建.md b/React 的源码深入/React Reconciler - Fiber 创建.md index 447fdd9..c07803b 100644 --- a/React 的源码深入/React Reconciler - Fiber 创建.md +++ b/React 的源码深入/React Reconciler - Fiber 创建.md @@ -54,7 +54,7 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例，并调用 然后回到 completeWork 的调用栈，它会将处理完毕的 DOM 示例插入到 WorkInProgress 的 stateNode 属性中，然后会调用 inalizeInitialChildren ，这个函数会为创建的 DOM 元素，插入已有的 props，内部也根据 Fiber 节点的 tag 区分不同的处理逻辑，还有对 props 是否合法的校验，甚至根据 props 的属性也做了不同逻辑的处理，最后会返回一个 Boolean 用于判断是否进入 markUpdate 逻辑，这个函数会把 Fiber 打上 Update 标记 最后再执行 bubbleProperties 进行一些处理，~~不谈~~ 整个 completeWork 的流程就走完了 -### 第一次触发更新 +## 第一次触发更新 ### createWorkInProgress @@ -70,9 +70,10 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例，并调用 最后返回到 bailoutOnAlreadyFinishedWork 在由它返回到 beginWork，beginWork 流程执行结束 -### 第二次触发更新 +## 第二次触发更新和后续触发更新 ### createWorkInProgress -第一步很熟悉，有了前面两次执行的流程可以cai'dao +第一步很熟悉，有了前面两次执行的流程可以猜到，第二次触发更新也是进入这个函数，那么这次执行和之前有什么不同吗？并没有，和第一次触发更新的时候一模一样，但是在这一次更新，React 的运行时终于拥有了两颗完整的 Fiber 树 -### 后续触发更新 \ No newline at end of file + +你可以会问我，到这里就没有了吗？ \ No newline at end of file