From 7ce1c8f8c0b62386e67099d89e35b104c5a0b856 Mon Sep 17 00:00:00 2001 From: YuJian Date: Tue, 10 May 2022 16:02:24 +0800 Subject: [PATCH] vault backup: 2022-05-10 16:02:24 --- .../React 的深入探索 - beginWork.md | 2 +- 自顶向下学 React 源码/React 源码的碎片记录.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md b/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md index 1d27993..767ca0e 100644 --- a/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md +++ b/React 的源码深入/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md @@ -31,7 +31,7 @@ if (current !== null) { } ``` -在进入正式 beginWork 阶段之前，会先对传入的 current 节点进行空值判断，根据 current 是否为空进入不同的处理逻辑，这一段代码的主要目的是为了赋值 didReceiveUpdate 变量 +在进入正式 beginWork 阶段之前，会先对传入的 current 节点进行空值判断，根据 current 是否为空进入不同的处理逻辑，这一段代码的主要目的是为了赋值 didReceiveUpdate 变量， ### current 不为空 diff --git a/自顶向下学 React 源码/React 源码的碎片记录.md b/自顶向下学 React 源码/React 源码的碎片记录.md index 7065f95..c897367 100644 --- a/自顶向下学 React 源码/React 源码的碎片记录.md +++ b/自顶向下学 React 源码/React 源码的碎片记录.md @@ -7,7 +7,7 @@ - reconcileChildren 方法接受 current 参数，通过判断这个参数是否为 null，分别执行 mountChildFibers 或 reconcileChildFibers 方法 - mountChildFibers 和 reconcileChildFibers 都是由 ChildReconciler 方法创建的，只是传入的布尔值会不同，而这个参数表示是否追踪副作用，mountChildFibers 为 false，reconcileChildFibers则相反 - 以 reconcileChildFibers 为例，会对 Children 的类型做判断，对判断结果分别做相应操作 -- completeWork 会对 beginWork 创建好的 Fiber 进行填充，根据 Fiber 类型的不同有不同的处理逻辑，其中有一步就是创建真实 DOM 元素并将之前创建好的 DOM 元素插入 +- completeWork 会对 beginWork 创建好的 Fiber 进行填充，根据 Fiber 类型的不同有不同的处理逻辑，其中有一步就是创建真实 DOM 元素并将之前创建好的 DOM 元素插入 - finalizeInitialChildren 为创建的 DOM 元素，插入已有的 props，内部也根据 Fiber 节点的 tag 区分不同的处理逻辑，还有对 props 是否合法的校验，甚至根据 props 的属性也做了不同逻辑的处理，最终交由 setValueForProperty 处理 - completeWork 中的 appendAllChildren 会将创建好的真实DOM元素插入之前创建的子DOM元素 - 对于首屏渲染，只会有一个节点被打上 effectTag，就是根节点，只需要根节点被打上 effectTag 那么就能渲染剩下的全部内容