vault backup: 2022-06-28 10:13:53

React 的深入探索/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md

@@ -39,7 +39,11 @@ if (current !== null) {
 ### current 不为空
 
 在 current 不为空的逻辑中，会先取出先前存储在 Fiber 节点中的新旧 props，连同其他几个判断条件一起做 if 判断，判断条件如下：
-1. 判断 p
+1. 用三等判断 props 是否发生变化
+2. 检查 context 是否发生变化
+3. 检查新旧 Fiber type 是否发生变化
+
+如果判断条件为 true 则会给 didReceiveUpdate 变量赋值为 true，进入正式 beginWork 阶段
 
 ```javascript
 var oldProps = current.memoizedProps;
@@ -59,6 +63,8 @@ if (
 }
 ```
 
+如果判断条件为 false，会进入后续判断逻辑
+
 ### current 为空
 
 didReceiveUpdate 赋值为 false
@@ -67,14 +73,6 @@ didReceiveUpdate 赋值为 false
 
 
 
-### beginWork
-
->beginWork 执行在递归节点的 Fiber 创建之前，主要是为传入的 Fiber 节点根据类型创建第一个子 Fiber 节点
-
-首先会对 current 做空值判断，因为对于首屏渲染而言，当前传入的 current Fiber 节点是 FiberNode，所以是存在的，会进入 current !== null 的逻辑，然后会判断当前 Fiber 节点是否发生变化，然后赋值 `didReceiveUpdate` 做更新标识，判断的条件如下：
-1. 新旧 props 是否相同
-2. Context 是否发生变化
-3. Fiber 节点 type 是否发生变化
 在本次首屏渲染中，以上的条件都为否，会进入后续条件判断，在后续的条件判断中主要是为了应付一些特殊的场景，例如错误边界和 legacy 模式，可以看到官方留下的代码注释，在我们现在的场景下，最终会走到 didReceiveUpdate 为 false 的情况下，也就是当前 Fiber 并没有变化，因为在之前的 createWorkInProgress 中 WorkFiberProgress 被赋值上了 current Fiber 的同名属性，所以它们会是相同的两个 FIber 节点，在这里的代码可以看到：beginWork 中还有对优先值 lanes 的一些处理，在这里先不展开，后续再补充
 最后会走入 switch 环节，这了主要根据传入的 WorkInProgress Fiber 节点的类型进入不同的处理逻辑，这也是 beginWork 最主要的任务：为当前 WorkInProgress Fiber 节点创建它的第一个 Fiber 子节点，其内部根据 Fiber 的 tag 不同有对应的：
 - updateClassComponent            处理 Class Component