From 08aa0198c27882b2dd4b84574ec557fe6d2df46b Mon Sep 17 00:00:00 2001 From: YuJian Date: Tue, 28 Jun 2022 11:43:53 +0800 Subject: [PATCH] vault backup: 2022-06-28 11:43:53 --- .../React 的深入探索 - beginWork.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/React 的深入探索/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md b/React 的深入探索/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md index 2ef7051..f9f3ba3 100644 --- a/React 的深入探索/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md +++ b/React 的深入探索/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md @@ -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) { } ``` -至此 current 不为空的逻辑就结束了，我们可以在这里做个小小的总结：**在 beginWork 阶段 React 会先判断当前组件是否发生变化需要更新， 是否可以复用，满足复用条件情况下进入 baliout 逻辑不再创建新的 Fiber 节点，从中可以看到对于特殊组件如Suspense 而言可能并不会进入 baliout 逻辑** +至此 current 不为空的逻辑就结束了，我们可以在这里做个小小的总结：**在 前beginWork 阶段主要是判断当前组件是否发生变化需要更新， 是否可以复用，在满足复用条件情况下会跳过 正式beginWork 阶段进入 baliout 逻辑而不再创建新的 Fiber 节点，从中可以看到对于特殊组件如 Suspense 而言可能并不会进入 baliout 逻辑** 在此之外我们也可以看到一些很有意思的点：**对于组件新旧 props 对比使用的是简单的三等判断**