vault backup: 2022-04-16 15:44:45

.obsidian/appearance.json

@@ -1,5 +1,5 @@
 {
-  "baseFontSize": 16,
+  "baseFontSize": 18,
   "theme": "obsidian",
   "cssTheme": "Minimal"
 }

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