diff --git a/React 的源码深入/React Reconciler - Fiber 创建.md b/React 的源码深入/React Reconciler - Fiber 创建.md index 3015bf5..c44f4f6 100644 --- a/React 的源码深入/React Reconciler - Fiber 创建.md +++ b/React 的源码深入/React Reconciler - Fiber 创建.md @@ -44,7 +44,9 @@ updateHostRoot 函数中首先会执行 pushHostRootContext 方法,这个方 函数开始,会执行 popTreeContext 并传入 workInProgress,这个函数应该也和 Context 相关,然后进入到 swtich 逻辑,根据 WorkInProgress Fiber 节点的 tag 属性的不同进入不同的 case 逻辑,这里和 beginWork 基本上类似 React 的遍历顺序是从父到子,最终再从子回到父,所以首屏渲染中首先进入 completeWork 的 WorkInProgress 不一定会是 FiberNode ,在这里是 HostComponent 进入到 HostComponent 的 case 之后,又执行了一遍 popTreeContext,官方的注释也写明似乎是有一些考虑在 -在 HostComponent 的 case 中,会判断 current 和 WorkInProgress.stateNode 是否为空,在首屏渲染的 completeWork 节点,这里都是空的,所以进入为空的逻辑:先检查当前 Fiber 节点是否存在 props 属性,最后调用 createInstance 创建一个 DOM 实例,它会调用 createElement 方法创建一个 DOM 实例,并调用 precacheFiberNode 和 +在 HostComponent 的 case 中,会判断 current 和 WorkInProgress.stateNode 是否为空,在首屏渲染的 completeWork 节点,这里都是空的,所以进入为空的逻辑:先检查当前 Fiber 节点是否存在 props 属性,最后调用 createInstance 创建一个 DOM 实例 +createInstance 会调用 createElement 方法创建一个 DOM 实例,并调用 precacheFiberNode 和 updateFiberProps 方法,这两个方法都是在插入属性,一个在当前 WorkInProgress Fiber 节点上插入 DOM,一个是在 DOM 上插入 props,最后将处理好的 DOM 返回 +返回的 DOM 会被接着交给 appendAllChildren 函数,这个函数会将创建好的 DOM 插入到之前 ### 第一次触发更新