1
0
Fork 0
Browse Source

vault backup: 2022-04-16 11:14:44

master
YuJian920 3 years ago
parent
commit
0170f7e98a
  1. 6
      React 的源码深入/React Reconciler - Fiber 创建.md

6
React 的源码深入/React Reconciler - Fiber 创建.md

@ -15,11 +15,13 @@ createWorkInProgress 之后,Fiber 的操作就会交由 beginWork 和 complete
> beginWork 执行在递归节点的 Fiber 执行之前,主要是为传入的 Fiber 节点根据类型创建第一个子 Fiber 节点 > beginWork 执行在递归节点的 Fiber 执行之前,主要是为传入的 Fiber 节点根据类型创建第一个子 Fiber 节点
首先会对 current 做空值判断,因为对于首屏渲染而言,当前传入的 current Fiber 节点是 FiberNode,所以是存在的,会进入 current !== null 的逻辑,然后会判断当前 Fiber 节点是否发生变化,然后赋值 didReceiveUpdate 做更新标识,判断的条件如下 首先会对 current 做空值判断,因为对于首屏渲染而言,当前传入的 current Fiber 节点是 FiberNode,所以是存在的,会进入 current !== null 的逻辑,然后会判断当前 Fiber 节点是否发生变化,然后赋值 didReceiveUpdate 做更新标识,判断的条件如下
1. 新旧 props 是否相同 1. 新旧 props 是否相同
2. Context 是否发生变化 2. Context 是否发生变化
3. Fiber 节点 type 是否发生变化 3. Fiber 节点 type 是否发生变化
在本次首屏渲染中,以上的条件都为否,会进入后续条件判断,在后续的条件判断中主要是为了应付一些特殊的场景,例如错误边界和 legacy 模式,具体可以看到官方留下的代码注释,在我们现在的场景下,最终会走到 didReceiveUpdate 为 false 的情况下,也就是当前 Fiber 并没有变化,因为在之前的 createWorkInProgress 在本次首屏渲染中,以上的条件都为否,会进入后续条件判断,在后续的条件判断中主要是为了应付一些特殊的场景,例如错误边界和 legacy 模式,具体可以看到官方留下的代码注释,在我们现在的场景下,最终会走到 didReceiveUpdate 为 false 的情况下,也就是当前 Fiber 并没有变化,因为在之前的 createWorkInProgress 中 WorkFiberProgress 被赋值上了 current Fiber 的同名属性,所以它们会是相同的两个 FIber 节点,在这里的代码可以看到:beginWork 中还有对优先值 lanes 的一些处理,在这里先不展开,后续再补充
最后会走入 switch 环节,这了主要根据传入的 WorkInProgress Fiber 节点的类型进入不同的处理逻辑,这也是 beginWork 最主要的任务:为当前 WorkInProgress Fiber 节点创建它的第一个 Fiber 子节点,其内部根据 Fiber 的 tag 不同有对应的:
-
### completeWork ### completeWork

Loading…
Cancel
Save