From 1ed149d5ecb2af6c75f180570980d6214a30d773 Mon Sep 17 00:00:00 2001 From: YuJian Date: Tue, 28 Jun 2022 16:29:23 +0800 Subject: [PATCH] vault backup: 2022-06-28 16:29:23 --- .../React 的深入探索 - beginWork.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/React 的深入探索/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md b/React 的深入探索/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md index e765263..a346e23 100644 --- a/React 的深入探索/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md +++ b/React 的深入探索/React 的流程解析 - Fiber 递归/React 的深入探索 - beginWork.md @@ -161,6 +161,19 @@ switch 中的 case 逻辑太多了，全部都写出来会让笔记显得特别 ### updateHostRoot +```javascript +function updateHostRoot(current, workInProgress, renderLanes) { + pushHostRootContext(workInProgress); + var updateQueue = workInProgress.updateQueue; + if (current === null || updateQueue === null) { + throw new Error("..."); + } + var nextProps = workInProgress.pendingProps; + var prevState = workInProgress.memoizedState; + var prevChildren = prevState.element; +} +``` + updateHostRoot 函数中首先会执行 pushHostRootContext 方法，这个方法和 Context 相关，现在暂且不谈 在 updateHostRoot 逻辑一开始，它会将 current 和 WorkInProgress 传递给 cloneUpdateQueue 这个函数，这个函数会将 Fiber 中的 queue 属性进行 clone，除非它们已经是 clone 之后的属性，那么具体是怎么做的判断是否是 clone 过的属性呢？其实很简单，它只是使用了 === 三个等于判断属性的引用是否相同，也就是说这个函数实际上做的是清除引用，保证在之后对 WorkInProgress 的操作不会影响到 current Fiber 树，判断两个 Fiber 树的 updateQueue 属性的引用完全相同，那么就会创建一个新的对象并重复赋值达到清除应用的目的，最后赋值给 WorkInProgress Fiber 节点 之后，再把 WorkInProgress Fiber 节点交给 processUpdateQueue 函数，这个函数主要是处理更新队列，在这里先不展开，TODO