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

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

@@ -163,6 +163,27 @@ switch 中的 case 逻辑太多了，全部都写出来会让笔记显得特别
 
 首先会执行 pushHostRootContext 函数，这个函数与 context  有关，暂且不谈
 
+**cloneUpdateQueue**
+
+```javascript
+function cloneUpdateQueue(current, workInProgress) {
+	var queue = workInProgress.updateQueue;
+	var currentQueue = current.updateQueue;
+
+	// 对比更新队列
+	if (queue === currentQueue) {
+		var clone = {
+			baseState: currentQueue.baseState,
+			firstBaseUpdate: currentQueue.firstBaseUpdate,
+			lastBaseUpdate: currentQueue.lastBaseUpdate,
+			shared: currentQueue.shared,
+			effects: currentQueue.effects
+		};
+		workInProgress.updateQueue = clone;
+	}
+}
+```
+
 ```javascript
 function updateHostRoot(current, workInProgress, renderLanes) {
 	// context 相关
@@ -173,8 +194,11 @@ function updateHostRoot(current, workInProgress, renderLanes) {
 		throw new Error("...");
 	}
 
+	// 取出组件新 props
 	var nextProps = workInProgress.pendingProps;
+	// 取出组件 state
 	var prevState = workInProgress.memoizedState;
+	// 从 state 中取出 element
 	var prevChildren = prevState.element;
 	cloneUpdateQueue(current, workInProgress);
 	processUpdateQueue(workInProgress, nextProps, null, renderLanes);