vault backup: 2022-06-28 17:54:23

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

@@ -163,17 +163,20 @@ switch 中的 case 逻辑太多了，全部都写出来会让笔记显得特别
 
 首先会执行 pushHostRootContext 函数，这个函数与 context  有关，暂且不谈
 
-然后会接着执行
+然后会接着执行 cloneUpdateQueue 方法
 
 **cloneUpdateQueue**
 
+ 这个方法比较简单，会判断 current 和  workInProgress 中的 updateQueue 是否相同，如果相同会创建新的对象重复赋值以清除引用，这里是为了保证后续对 workInProgress 的操作不会影响到 current 
+
 ```javascript
 function cloneUpdateQueue(current, workInProgress) {
 	var queue = workInProgress.updateQueue;
 	var currentQueue = current.updateQueue;
 
-	// 对比更新队列
+	// 用三等对比更新队列，如果为 true 表示 queue 还未清除引用
 	if (queue === currentQueue) {
+		// 清除引用
 		var clone = {
 			baseState: currentQueue.baseState,
 			firstBaseUpdate: currentQueue.firstBaseUpdate,
@@ -181,11 +184,14 @@ function cloneUpdateQueue(current, workInProgress) {
 			shared: currentQueue.shared,
 			effects: currentQueue.effects
 		};
+		// 赋值
 		workInProgress.updateQueue = clone;
 	}
 }
 ```
 
+从processUpdateQueue
+
 ```javascript
 function updateHostRoot(current, workInProgress, renderLanes) {
 	// context 相关
@@ -225,8 +231,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
 }
 ```
 
-updateHostRoot 函数中首先会执行 pushHostRootContext 方法，这个方法和 Context 相关，现在暂且不谈
-在 updateHostRoot 逻辑一开始，它会将 current 和 WorkInProgress 传递给 cloneUpdateQueue 这个函数，这个函数会将 Fiber 中的 queue 属性进行 clone，除非它们已经是 clone 之后的属性，那么具体是怎么做的判断是否是 clone 过的属性呢？其实很简单，它只是使用了 === 三个等于判断属性的引用是否相同，也就是说这个函数实际上做的是清除引用，保证在之后对 WorkInProgress 的操作不会影响到 current Fiber 树，判断两个 Fiber 树的 updateQueue 属性的引用完全相同，那么就会创建一个新的对象并重复赋值达到清除应用的目的，最后赋值给 WorkInProgress Fiber 节点
 之后，再把 WorkInProgress Fiber 节点交给 processUpdateQueue 函数，这个函数主要是处理更新队列，在这里先不展开，TODO
 再往后是一些针对服务端渲染的一些处理逻辑，服务端渲染也不是这次讨论的目的，也先跳过
 最终调用 reconcileChildren 为 FIber 创建一个子 Fiber 节点并返回