|
|
|
|
@ -68,10 +68,10 @@ if (
@@ -68,10 +68,10 @@ if (
|
|
|
|
|
此时会先调用 checkScheduledUpdateOrContext 函数检查 current 是否存在优先级相关的更新，关于 React 优先级相关我们先暂且按表不谈，进入 if 判断 |
|
|
|
|
|
|
|
|
|
- 不存在优先级相关的更新且 workInProgress 节点不存在 DidCapture flag |
|
|
|
|
- 跳过后续的正式 beginWork 阶段，进入 baliout 也就是组件复用逻辑 |
|
|
|
|
- 以上判断条件不成立，判断当前 current 节点是否存在 ForceUpdateForLegacySuspense flag |
|
|
|
|
- True：didReceiveUpdate 赋值为 true |
|
|
|
|
- False：didReceiveUpdate 赋值为 false |
|
|
|
|
- True：跳过后续的正式 beginWork 阶段，进入 baliout 也就是组件复用逻辑 |
|
|
|
|
- False：判断当前 current 节点是否存在 ForceUpdateForLegacySuspense flag |
|
|
|
|
- True：didReceiveUpdate 赋值为 true |
|
|
|
|
- False：didReceiveUpdate 赋值为 false |
|
|
|
|
|
|
|
|
|
```javascript |
|
|
|
|
// props 和 context 都没有发生变化，检查优先级相关 |
|
|
|
|
@ -100,7 +100,7 @@ if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {
@@ -100,7 +100,7 @@ if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {
|
|
|
|
|
} |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
至此 current 不为空的逻辑就结束了，我们可以在这里做个小小的总结：**在 beginWork 阶段 React 会先判断当前组件是否发生变化需要更新， 是否可以复用，满足复用条件情况下进入 baliout 逻辑不再创建新的 Fiber 节点，从中可以看到对于特殊组件如Suspense 而言可能并不会进入 baliout 逻辑** |
|
|
|
|
至此 current 不为空的逻辑就结束了，我们可以在这里做个小小的总结：**在 前beginWork 阶段主要是判断当前组件是否发生变化需要更新， 是否可以复用，在满足复用条件情况下会跳过 正式beginWork 阶段进入 baliout 逻辑而不再创建新的 Fiber 节点，从中可以看到对于特殊组件如 Suspense 而言可能并不会进入 baliout 逻辑** |
|
|
|
|
|
|
|
|
|
在此之外我们也可以看到一些很有意思的点：**对于组件新旧 props 对比使用的是简单的三等判断** |
|
|
|
|
|
|
|
|
|
|
YuJian
2 years ago