From 0a0225fc016486fad027ee21abed1124382d6b6d Mon Sep 17 00:00:00 2001 From: YuJian920 Date: Sat, 16 Apr 2022 15:49:45 +0800 Subject: [PATCH] vault backup: 2022-04-16 15:49:45 --- React 的源码深入/React Reconciler - Fiber 创建.md | 2 +- 自顶向下学 React 源码/React 源码的碎片记录.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/React 的源码深入/React Reconciler - Fiber 创建.md b/React 的源码深入/React Reconciler - Fiber 创建.md index 0958217..5368a71 100644 --- a/React 的源码深入/React Reconciler - Fiber 创建.md +++ b/React 的源码深入/React Reconciler - Fiber 创建.md @@ -50,7 +50,7 @@ createInstance 会调用 createElement 方法创建一个 DOM 实例，并调用 ### appendAllChildren 函数首先会判断 WorkInProgress 的 child 属性是否为空，如果不为空就进入 while 循环，因为这里是首屏渲染的第一次 completeWork 所以进入到一定是最小的子组件，不会存在 child 属性，所以会跳过循环，也就会跳过插入逻辑，回到 completeWork 的调用栈中 -然后回到 completeWork 的调用栈，它会将处理完毕的 DOM 示例插入到 WorkInProgress 的 stateNode 属性中， +然后回到 completeWork 的调用栈，它会将处理完毕的 DOM 示例插入到 WorkInProgress 的 stateNode 属性中，然后会调用 inalizeInitialChildren ，这个函数会为创建的 DOM 元素，插入已有的 props，内部也根据 Fiber 节点的 tag 区分不同的处理逻辑，还有对 props 是否合法的校验，甚至根据 props 的属性也做了不同逻辑的处理，最后会返回一个 Boolean 用于判断是否进入 markUpdate 逻辑，这个函数会把 ### 第一次触发更新 diff --git a/自顶向下学 React 源码/React 源码的碎片记录.md b/自顶向下学 React 源码/React 源码的碎片记录.md index 75f2351..09752bb 100644 --- a/自顶向下学 React 源码/React 源码的碎片记录.md +++ b/自顶向下学 React 源码/React 源码的碎片记录.md @@ -22,7 +22,7 @@ - mountChildFibers 和 reconcileChildFibers 都是由 ChildReconciler 方法创建的，只是传入的布尔值会不同，而这个参数表示是否追踪副作用，mountChildFibers 为 false，reconcileChildFibers则相反 - 以 reconcileChildFibers 为例，会对 Children 的类型做判断，对判断结果分别做相应操作 - completeWork 会对 beginWork 创建好的 Fiber 进行填充，根据 Fiber 类型的不同有不同的处理逻辑，其中有一步就是创建真实 DOM 元素并将之前创建好的 DOM 元素插入 -- finalizeInitChildren 为创建的 DOM 元素，插入已有的 props，内部也根据 Fiber 节点的 tag 区分不同的处理逻辑，还有对 props 是否合法的校验，甚至根据 props 的属性也做了不同逻辑的处理，最终交由 setValueForProperty 处理 +- finalizeInitialChildren 为创建的 DOM 元素，插入已有的 props，内部也根据 Fiber 节点的 tag 区分不同的处理逻辑，还有对 props 是否合法的校验，甚至根据 props 的属性也做了不同逻辑的处理，最终交由 setValueForProperty 处理 - completeWork 中的 appendAllChildren 会将创建好的真实DOM元素插入之前创建的子DOM元素 - 对于首屏渲染，只会有一个节点被打上 effectTag，就是根节点，只需要根节点被打上 effectTag 那么就能渲染剩下的全部内容 - createWorkInProgress 会创建新的 WorkInProgress Fiber，会根据 current Fiber 的 alternate 属性检查是否已经存在 WorkInProgress Fiber，如果没有会通过 createFiber 创建新的 Fiber 并将 current Fiber 的已有属性进行赋值，最后让 WorkInProgress Fiber 的 alternate 属性进行双向链接