From 54c3b80b23fd2214b15899e742cf8e2c19c77d21 Mon Sep 17 00:00:00 2001 From: YuJian920 Date: Sat, 16 Apr 2022 15:44:45 +0800 Subject: [PATCH] vault backup: 2022-04-16 15:44:45 --- .obsidian/appearance.json | 2 +- React 的源码深入/React Reconciler - Fiber 创建.md | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/.obsidian/appearance.json b/.obsidian/appearance.json index 544001b..2befd5e 100644 --- a/.obsidian/appearance.json +++ b/.obsidian/appearance.json @@ -1,5 +1,5 @@ { - "baseFontSize": 16, + "baseFontSize": 18, "theme": "obsidian", "cssTheme": "Minimal" } \ No newline at end of file diff --git a/React 的源码深入/React Reconciler - Fiber 创建.md b/React 的源码深入/React Reconciler - Fiber 创建.md index c44f4f6..0958217 100644 --- a/React 的源码深入/React Reconciler - Fiber 创建.md +++ b/React 的源码深入/React Reconciler - Fiber 创建.md @@ -46,7 +46,11 @@ React 的遍历顺序是从父到子，最终再从子回到父，所以首屏 进入到 HostComponent 的 case 之后，又执行了一遍 popTreeContext，官方的注释也写明似乎是有一些考虑在 在 HostComponent 的 case 中，会判断 current 和 WorkInProgress.stateNode 是否为空，在首屏渲染的 completeWork 节点，这里都是空的，所以进入为空的逻辑：先检查当前 Fiber 节点是否存在 props 属性，最后调用 createInstance 创建一个 DOM 实例 createInstance 会调用 createElement 方法创建一个 DOM 实例，并调用 precacheFiberNode 和 updateFiberProps 方法，这两个方法都是在插入属性，一个在当前 WorkInProgress Fiber 节点上插入 DOM，一个是在 DOM 上插入 props，最后将处理好的 DOM 返回 -返回的 DOM 会被接着交给 appendAllChildren 函数，这个函数会将创建好的 DOM 插入到之前 + +### appendAllChildren +函数首先会判断 WorkInProgress 的 child 属性是否为空，如果不为空就进入 while 循环，因为这里是首屏渲染的第一次 completeWork 所以进入到一定是最小的子组件，不会存在 child 属性，所以会跳过循环，也就会跳过插入逻辑，回到 completeWork 的调用栈中 + +然后回到 completeWork 的调用栈，它会将处理完毕的 DOM 示例插入到 WorkInProgress 的 stateNode 属性中， ### 第一次触发更新