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 属性中, ### 第一次触发更新