feat(reconciler): 完成 render 阶段源码注释以及调用栈图

Author: coderlfm

Diff for: docs/img/commit.dio

@@ -98,7 +98,7 @@ this.setState({val: 6});
 结论是：这是因为方便定位到链表的第一个元素。updateQueue指向它的最后一个update，updateQueue.next指向它的第一个update。
 
 试想一下，若不使用环状链表，updateQueue指向最后一个元素，需要遍历才能获取链表首部。即使将updateQueue指向第一个元素，那么新增update时仍然要遍历到尾部才能将新增的接入链表。而环状链表，只需记住尾部，无需遍历操作就可以找到首部。理解概念是重中之重，下面再来看一下实现：
-```
+``` js
 function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
    const updateQueue = fiber.updateQueue;
    if (updateQueue === null) {

Diff for: docs/img/render.dio

@@ -1,3 +1,7 @@
+body{
+  background-color: #0D1117;
+  color: #ddd;
+}
 #root {
   position: relative;
 }
@@ -7,8 +11,6 @@
   position: absolute;
   top: 20px;
   left: 30%;
-} {
-
 }
 .App {
   text-align: center;

Diff for: docs/img/test.dio

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, } from 'react';
+import ReactDOM from 'react-dom'
 import State from './components/State'
 import LanesDemo from './components/LanesDemo'
 import AppSibling from './components/AppSibling'
@@ -22,41 +23,43 @@ function App() {
 
   useEffect(() => {
     console.log('useEffect被执行');
+    
+console.log("%c'useEffect被执行 %c", "color:green",)
     return () => {
       console.log('useEffect 卸载函数被执行');
     }
   }, [])
 
-  const [count, setCount] = useState(1)
+  const [flag, setFlag] = useState(true)
 
   // 事件系统
   // return <EventDemo/>
 
   // return <Hooks/>
   // fiber树
 
-  const a = <div>
-    <h2 key="hello">hello</h2>
-    <p key="world">world</p>
-  </div>
-
-  // 顺序不一致
-  // const b = <div>
-  //   <p key="world">world</p>
-  //   <h2 key="hello">hello</h2>
-  // </div>
-  
-  // 类型不一致
-  const b = <div>
-    <h6 key="hello">hello</h6>
-    <p key="world">world</p>
-  </div>
-
   return (
-    <div className="App" onClick={() => setCount(count + 1)}>
-      {count % 2 ? a : b}
+    <div className="App" onClick={() => {
+      debugger;
+      setFlag(!flag)
+    }}>
+      {
+        flag
+          ? (
+            <div>
+              <h2 key="hello" className="h2-wrap">hello</h2>
+              <p key="world" className="p-wrap">world</p>
+            </div>
+          )
+          : (<div>
+            <h6 key="hello">hello</h6>
+            <p key="world">world</p>
+          </div>)
+      }
+
       {/* <span>我是span {count}</span> */}
       {/* <h2>我是h2</h2> */}
+      {/* {ReactDOM.createPortal} */}
     </div>
   );
   {/* <span className={'app-span'} onClick={() => setCount(count + 1)}>App{count}</span> */ }

Diff for: docs/render阶段/beginWork阶段/处理更新.md

@@ -253,6 +253,8 @@ function legacyRenderSubtreeIntoContainer(
     // Update  批量更新
     updateContainer(children, fiberRoot, parentComponent, callback);
   }
+
+  // 获取根的真实dom
   return getPublicRootInstance(fiberRoot);
 }
 

Diff for: src/App.css

@@ -111,7 +111,7 @@ ReactDOMRoot.prototype.unmount = ReactDOMLegacyRoot.prototype.unmount = function
   });
 };
 
-// 初始化rendr 时 options 的值是 { hydrate: true, } 和 undefined，非服务端渲染时是 undefined
+// legacy  模式 render() 初始化rendr 时 options 的值是 { hydrate: true, } 和 undefined，非服务端渲染时是 undefined
 function createRootImpl(
   container: Container,
   tag: RootTag,
@@ -176,6 +176,7 @@ function createRootImpl(
   return root;
 }
 
+// concurrent 模式
 export function createRoot(
   container: Container,
   options?: RootOptions,

Diff for: src/App.js

@@ -631,6 +631,7 @@ export function dispatchEventForPluginEventSystem(
     }
   }
 
+  // 批量更新
   batchedEventUpdates(() =>
     dispatchEventsForPlugins(
       domEventName,

Diff for: src/react/v17.0.2/react-dom/src/client/ReactDOMLegacy.js

@@ -735,7 +735,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     lanes: Lanes,
   ): Fiber | null {
 
-    // 这个算法不能通过从两端搜索来优化，因为我们在纤维上没有反向指针。我想看看这个模型能走多远。如果它最终不值得进行权衡，我们可以稍后添加它。
+    // 这个算法不能通过从两端搜索来优化，因为我们在 fiber 上没有反向指针。我想看看这个模型能走多远。如果它最终不值得进行权衡，我们可以稍后添加它。
     // 即使是两个端点的优化，我们也希望优化的情况下，有很少的改变和暴力的比较，而不是去 Map。它会首先在forward-only模式中探索命中那条路径，并且只有当我们注意到我们需要很多前瞻性时才会去寻找 Map。这不能像两个结束的搜索那样处理反转，但这是不寻常的。此外，为了使两端优化在Iterables上工作，我们需要复制整个集合。
     // 在第一次迭代中，我们只会在每次插入/移动时碰到坏情况(向Map添加所有内容)。
     // 如果你改变这个代码，也更新reconcileChildrenIterator()，它使用相同的算法。
@@ -1110,6 +1110,7 @@ function ChildReconciler(shouldTrackSideEffects) {
   ): Fiber {
     const key = element.key;
     let child = currentFirstChild;
+    // 第一次 render  child 为 null
     while (child !== null) {
       // TODO: If key === null and child.key === null, then this only applies to
       // the first item in the list.
@@ -1327,9 +1328,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       }
     }
     if (typeof newChild === 'undefined' && !isUnkeyedTopLevelFragment) {
-      // If the new child is undefined, and the return fiber is a composite
-      // component, throw an error. If Fiber return types are disabled,
-      // we already threw above.
+      // If the new child is undefined, and the return fiber is a composite component, throw an error. If Fiber return types are disabled, we already threw above.
       switch (returnFiber.tag) {
         case ClassComponent: {
           if (__DEV__) {

Diff for: src/react/v17.0.2/react-dom/src/client/ReactDOMRoot.js

@@ -505,6 +505,7 @@ export function createFiberFromTypeAndProps(
   lanes: Lanes,
 ): Fiber {
   let fiberTag = IndeterminateComponent;
+  // 如果我们知道最终类型是什么，则设置 resolved tyle, IE。这不是 lazy。 
   // The resolved type is set if we know what the final type will be. I.e. it's not lazy.
   let resolvedType = type;
   if (typeof type === 'function') {

Diff for: src/react/v17.0.2/react-dom/src/events/DOMPluginEventSystem.js

@@ -1137,15 +1137,16 @@ function pushHostRootContext(workInProgress) {
       root.pendingContext !== root.context,
     );
   } else if (root.context) {
-    // Should always be set
+    // Should always be set 应始终设置
+    // 推送顶级上下文对象
     pushTopLevelContextObject(workInProgress, root.context, false);
   }
   pushHostContainer(workInProgress, root.containerInfo);
 }
 
 // 更新根组件
 function updateHostRoot(current, workInProgress, renderLanes) {
-  // 暂时没看
+  // 在堆栈中记录了一些数据
   pushHostRootContext(workInProgress);
   const updateQueue = workInProgress.updateQueue;
   invariant(
@@ -1165,6 +1166,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   // 计算到新的 state 给 memoizedState 添加上值  cache，element
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
   // 取到新的 state
+  /**
+   cache: Map(0) {}
+   element: {$$typeof: Symbol(react.element)
+   */
   const nextState = workInProgress.memoizedState;
 
   const root: FiberRoot = workInProgress.stateNode;
@@ -3503,6 +3508,9 @@ function beginWork(
     didReceiveUpdate = false;
   }
 
+  // 在进入开始阶段之前，清除挂起的更新优先级
+  // 这假设我们即将评估组件并处理更新队列。
+  // 但是，有一个例外：SimpleMemoComponent 有时会在开始阶段的后期退出。 这表明我们应该将此分配移出公共路径并进入每个分支。
   // Before entering the begin phase, clear pending update priority.
   // TODO: This assumes that we're about to evaluate the component and process
   // the update queue. However, there's an exception: SimpleMemoComponent

Diff for: src/react/v17.0.2/react-reconciler/src/ReactChildFiber.old.js

@@ -1547,22 +1547,23 @@ function commitPlacement(finishedWork: Fiber): void {
   }
 
   // Recursively insert all host nodes into the parent.
+  // 递归向上找到 有真实 dom 的fiber
   const parentFiber = getHostParentFiber(finishedWork);
 
   // Note: these two variables *must* always be updated together.
   let parent;
   let isContainer;
   const parentStateNode = parentFiber.stateNode;
   switch (parentFiber.tag) {
-    case HostComponent:
+    case HostComponent:     // 原生dom 标签
       parent = parentStateNode;
       isContainer = false;
       break;
-    case HostRoot:
+    case HostRoot:          // 根元素
       parent = parentStateNode.containerInfo;
       isContainer = true;
       break;
-    case HostPortal:
+    case HostPortal:        // 通过 createPortal 创建的元素
       parent = parentStateNode.containerInfo;
       isContainer = true;
       break;
@@ -1576,15 +1577,19 @@ function commitPlacement(finishedWork: Fiber): void {
   }
   if (parentFiber.flags & ContentReset) {
     // Reset the text content of the parent before doing any insertions
+    // 在执行任何插入之前，重置父元素的文本内容
     resetTextContent(parent);
+    // 清除 ContentReset 的 effect 标记
     // Clear ContentReset from the effect tag
     parentFiber.flags &= ~ContentReset;
   }
 
+  // 获取兄弟节点
   const before = getHostSibling(finishedWork);
   // We only have the top Fiber that was inserted but we need to recurse down its
   // children to find all the terminal nodes.
   if (isContainer) {
+    // 将放置节点插入或附加到容器中
     insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
   } else {
     insertOrAppendPlacementNode(finishedWork, before, parent);
@@ -2243,6 +2248,9 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
     }
   }
 
+  // 下面的switch语句只关心放置、更新和删除。
+  // 为了避免需要为每个可能的位图值添加一个案例，我们从效果标签中删除了辅助效果并打开该值。 
+
   // The following switch statement is only concerned about placement,
   // updates, and deletions. To avoid needing to add a case for every possible
   // bitmap value, we remove the secondary effects from the effect tag and
@@ -2600,17 +2608,7 @@ function commitPassiveUnmountEffects_begin() {
         }
 
         if (deletedTreeCleanUpLevel >= 1) {
-          // A fiber was deleted from this parent fiber, but it's still part of
-          // the previous (alternate) parent fiber's list of children. Because
-          // children are a linked list, an earlier sibling that's still alive
-          // will be connected to the deleted fiber via its `alternate`:
-          //
-          //   live fiber
-          //   --alternate--> previous live fiber
-          //   --sibling--> deleted fiber
-          //
-          // We can't disconnect `alternate` on nodes that haven't been deleted
-          // yet, but we can disconnect the `sibling` and `child` pointers.
+          // A fiber was deleted from this parent fiber, but it's still part of the previous (alternate) parent fiber's list of children. Because children are a linked list, an earlier sibling that's still alive will be connected to the deleted fiber via its `alternate`:   live fiber   --alternate--> previous live fiber   --sibling--> deleted fiber We can't disconnect `alternate` on nodes that haven't been deleted yet, but we can disconnect the `sibling` and `child` pointers.
           const previousFiber = fiber.alternate;
           if (previousFiber !== null) {
             let detachedChild = previousFiber.child;

Diff for: src/react/v17.0.2/react-reconciler/src/ReactFiber.old.js

@@ -935,7 +935,7 @@ function completeWork(
             currentHostContext,
             workInProgress,
           );
-          
+          // debugger
           // 将当前元素的所有 真实dom child 追加到 当前元素下
           appendAllChildren(instance, workInProgress, false, false);
 

Diff for: src/react/v17.0.2/react-reconciler/src/ReactFiberBeginWork.old.js

@@ -1992,6 +1992,10 @@ function dispatchAction<S, A>(
         try {
           const currentState: S = (queue.lastRenderedState: any);
           const eagerState = lastRenderedReducer(currentState, action);
+
+          // 将急切计算的状态和用于计算它的reducer保存在更新对象上。
+          // 如果 reducer 在我们进入渲染阶段时还没有改变，那么无需再次调用 reducer ，就可以使用 eager 状态。
+          
           // Stash the eagerly computed state, and the reducer used to compute
           // it, on the update object. If the reducer hasn't changed by the
           // time we enter the render phase, then the eager state can be used

Diff for: src/react/v17.0.2/react-reconciler/src/ReactFiberCommitWork.old.js

@@ -10,14 +10,15 @@
 import type {UpdateQueue as HookQueue} from './ReactFiberHooks.old';
 import type {SharedQueue as ClassQueue} from './ReactUpdateQueue.old';
 
+// 在当前渲染期间接收更新的所有更新队列的数组。 当这个渲染退出时，无论是因为它完成还是因为它被中断，交错更新将被转移到队列的主要部分。
 // An array of all update queues that received updates during the current
 // render. When this render exits, either because it finishes or because it is
 // interrupted, the interleaved updates will be transfered onto the main part
 // of the queue.
 let interleavedQueues: Array<
   HookQueue<any, any> | ClassQueue<any>,
 > | null = null;
-
+ 
 export function pushInterleavedQueue(
   queue: HookQueue<any, any> | ClassQueue<any>,
 ) {
@@ -30,8 +31,10 @@ export function pushInterleavedQueue(
 
 export function enqueueInterleavedUpdates() {
 
-/*   将交错更新传输到主队列上。每个队列都有一个“挂起”字段和一个“交错”字段。
-  当它们不为空时，它们指向循环链表中的最后一个节点。我们需要将交叉列表添加到待处理列表的末尾，方法是将它们连接到一个单一的循环列表中。 */
+  /*   将并发更新传输到主队列。每个队列都有一个“pending”字段和一个“interleaved”字段。
+  当它们不为空时，它们指向循环链表中的最后一个节点。我们需要将交错列表附加到待处理列表的末尾，方法是将它们连接到一个单一的循环列表中。 */
+  // Transfer the interleaved updates onto the main queue. Each queue has a `pending` field and an `interleaved` field. When they are not null, they point to the last node in a circular linked list. We need to append the interleaved list to the end of the pending list by joining them into a single, circular list.
+  
   // Transfer the interleaved updates onto the main queue. Each queue has a
   // `pending` field and an `interleaved` field. When they are not null, they
   // point to the last node in a circular linked list. We need to append the

Diff for: src/react/v17.0.2/react-reconciler/src/ReactFiberCompleteWork.old.js

@@ -668,10 +668,10 @@ export function markRootUpdated(
 
   /* 如果有任何暂停的过渡，则此新更新可能会取消阻止它们。 清除暂停的车道，以便我们可以尝试再次渲染它们。
 
-  TODO：实际上，我们只需要取消挂起更新光纤的“ subtreeLanes”中的通道或返回路径的更新通道即可。 
-  这将排除不相关的同级树中的暂挂更新，此更新无法解除阻止。
+    我们实际上只需要取消挂起更新 fiber 的“subtreeLanes”中的通道，或返回路径的更新 lanes 。这将排除不相关的兄弟树中挂起的更新，因为此更新无法取消阻止它。 
 
-  如果传入的更新是空闲的，则不执行此操作，因为直到所有常规更新都完成后，我们才处理空闲的更新。 它不可能解开过渡。  */
+    如果传入的更新是空闲的，我们不会这样做，因为在所有常规更新完成之前，我们永远不会处理空闲更新；不会解除对转换的阻止。 
+  */
 
   // 如果不相对 则把以下设置为 0
   if (updateLane !== IdleLane) {
@@ -685,7 +685,7 @@ export function markRootUpdated(
   * 那么eventTimes是这种形式： [ -1, -1, -1, 44573.3452, -1, -1 ]
   * 用一个数组去存储eventTimes，-1表示空位，非-1的位置与lanes中的1的位置相同
   * */
-  const eventTimes = root.eventTimes;
+  const eventTimes = root.eventTimes;   // 长度为 31 的数组 每个值默认是 0
   // 根据 更新等级返回 索引
   const index = laneToIndex(updateLane);
   // We can always overwrite an existing timestamp because we prefer the most

Diff for: src/react/v17.0.2/react-reconciler/src/ReactFiberHooks.old.js

@@ -389,6 +389,7 @@ export function getPublicRootInstance(
     case HostComponent:
       return getPublicInstance(containerFiber.child.stateNode);
     default:
+      // 返回真实 dom
       return containerFiber.child.stateNode;
   }
 }