From e14be6f44dab5a59dc4ceca56b74bb895ec7ad78 Mon Sep 17 00:00:00 2001 From: YuJian920 Date: Sat, 7 May 2022 22:48:15 +0800 Subject: [PATCH] vault backup: 2022-05-07 22:48:15 --- .../React 的流程解析 - Fiber 递归.md | 18 ++---------------- .../React 的深入探索 - completeWork.md | 13 +++++++++++++ 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/React 的源码深入/React 的流程解析 - Fiber 递归/React 的流程解析 - Fiber 递归.md b/React 的源码深入/React 的流程解析 - Fiber 递归/React 的流程解析 - Fiber 递归.md index 9d4d58d..6e090f1 100644 --- a/React 的源码深入/React 的流程解析 - Fiber 递归/React 的流程解析 - Fiber 递归.md +++ b/React 的源码深入/React 的流程解析 - Fiber 递归/React 的流程解析 - Fiber 递归.md @@ -14,23 +14,9 @@ React 的首屏渲染时会交由 createWorkInProgress 函数生成 WorkInProgre **beginWork 执行在递归节点的 Fiber 创建之前，主要是为传入的 Fiber 节点创建第一个子 Fiber 节点**，其内部可以看作一个大的 switch 语句，根据传入的 Fiber 节点的子元素类型不同执行不同的 Fiber 创建逻辑，不管父元素拥有多少个子元素，它最终都会创建并返回第一个子元素的 Fiber 节点，直到并不存在子元素为止，[[React 的深入探索 - beginWork]]。 -如果探索到了可达的最后一个子元素，那么就会结束探索阶段，进入回溯阶段：执行completeWork 函数逻辑 +如果探索到了可达的最后一个子元素，那么就会结束探索阶段，进入回溯阶段：执行completeWork 函数逻辑。 -### completeWork - ->completeWork 执行在递归节点的 Fiber 创建之后，主要是为创建好的 Fiber 节点插入内容和插入真实 DOM 树 - -函数开始，会执行 popTreeContext 并传入 workInProgress，这个函数应该也和 Context 相关，然后进入到 swtich 逻辑，根据 WorkInProgress Fiber 节点的 tag 属性进入不同的 case 逻辑，这里和 beginWork 基本上类似 -React 的遍历顺序是从父到子，最终再从子回到父，所以首屏渲染中首先进入 completeWork 的 WorkInProgress 不一定会是 FiberNode ，在这里是 HostComponent -进入到 HostComponent 的 case 之后，又执行了一遍 popTreeContext，官方的注释也写明似乎是有一些考虑在 -在 HostComponent 的 case 中，会判断 current 和 WorkInProgress.stateNode 是否为空，在首屏渲染的 completeWork 节点，这里都是空的，所以进入为空的逻辑：先检查当前 Fiber 节点是否存在 props 属性，最后调用 createInstance 创建一个 DOM 实例 -createInstance 会调用 createElement 方法创建一个 DOM 实例，并调用 precacheFiberNode 和 updateFiberProps 方法，这两个方法都是在插入属性，一个在当前 WorkInProgress Fiber 节点上插入 DOM，一个是在 DOM 上插入 props，最后将处理好的 DOM 返回 - -### appendAllChildren -函数首先会判断 WorkInProgress 的 child 属性是否为空，如果不为空就进入 while 循环，因为这里是首屏渲染的第一次 completeWork 所以进入到一定是最小的子组件，不会存在 child 属性，所以会跳过循环，也就会跳过插入逻辑，回到 completeWork 的调用栈中 - -然后回到 completeWork 的调用栈，它会将处理完毕的 DOM 示例插入到 WorkInProgress 的 stateNode 属性中，然后会调用 inalizeInitialChildren ，这个函数会为创建的 DOM 元素，插入已有的 props，内部也根据 Fiber 节点的 tag 区分不同的处理逻辑，还有对 props 是否合法的校验，甚至根据 props 的属性也做了不同逻辑的处理，最后会返回一个 Boolean 用于判断是否进入 markUpdate 逻辑，这个函数会把 Fiber 打上 Update 标记 -最后再执行 bubbleProperties 进行一些处理，~~不谈~~ 整个 completeWork 的流程就走完了 +completeWork 负责深度优先遍历中的回溯阶段，**它执行在递归节点的 Fiber 创建之后，主要负责完善创建好的 Fiber 节点和插入其真实 DOM 树**，首屏渲染中首先进入该函数的可能是 ## 第一次触发更新 diff --git a/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - completeWork.md b/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - completeWork.md index e69de29..1231027 100644 --- a/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - completeWork.md +++ b/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - completeWork.md @@ -0,0 +1,13 @@ +>completeWork 执行在递归节点的 Fiber 创建之后，主要是为创建好的 Fiber 节点插入内容和插入真实 DOM 树 + +函数开始，会执行 popTreeContext 并传入 workInProgress，这个函数应该也和 Context 相关，然后进入到 swtich 逻辑，根据 WorkInProgress Fiber 节点的 tag 属性进入不同的 case 逻辑，这里和 beginWork 基本上类似 +React 的遍历顺序是从父到子，最终再从子回到父，所以首屏渲染中首先进入 completeWork 的 WorkInProgress 不一定会是 FiberNode ，在这里是 HostComponent +进入到 HostComponent 的 case 之后，又执行了一遍 popTreeContext，官方的注释也写明似乎是有一些考虑在 +在 HostComponent 的 case 中，会判断 current 和 WorkInProgress.stateNode 是否为空，在首屏渲染的 completeWork 节点，这里都是空的，所以进入为空的逻辑：先检查当前 Fiber 节点是否存在 props 属性，最后调用 createInstance 创建一个 DOM 实例 +createInstance 会调用 createElement 方法创建一个 DOM 实例，并调用 precacheFiberNode 和 updateFiberProps 方法，这两个方法都是在插入属性，一个在当前 WorkInProgress Fiber 节点上插入 DOM，一个是在 DOM 上插入 props，最后将处理好的 DOM 返回 + +### appendAllChildren +函数首先会判断 WorkInProgress 的 child 属性是否为空，如果不为空就进入 while 循环，因为这里是首屏渲染的第一次 completeWork 所以进入到一定是最小的子组件，不会存在 child 属性，所以会跳过循环，也就会跳过插入逻辑，回到 completeWork 的调用栈中 + +然后回到 completeWork 的调用栈，它会将处理完毕的 DOM 示例插入到 WorkInProgress 的 stateNode 属性中，然后会调用 inalizeInitialChildren ，这个函数会为创建的 DOM 元素，插入已有的 props，内部也根据 Fiber 节点的 tag 区分不同的处理逻辑，还有对 props 是否合法的校验，甚至根据 props 的属性也做了不同逻辑的处理，最后会返回一个 Boolean 用于判断是否进入 markUpdate 逻辑，这个函数会把 Fiber 打上 Update 标记 +最后再执行 bubbleProperties 进行一些处理，~~不谈~~ 整个 completeWork 的流程就走完了 \ No newline at end of file