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

Author: coderlfm

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) {

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;

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> */ }

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

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

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,

src/App.js

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

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__) {