feat(reaconciler): 新增 更新阶段源码注释

Author: coderlfm

Diff for: docs/img/render.dio

@@ -23,14 +23,15 @@ function App() {
 
   useEffect(() => {
     console.log('useEffect被执行');
-    
-console.log("%c'useEffect被执行 %c", "color:green",)
+
+    console.log("%c'useEffect被执行 %c", "color:green",)
     return () => {
       console.log('useEffect 卸载函数被执行');
     }
   }, [])
 
   const [flag, setFlag] = useState(true)
+  const [counter, setCounter] = useState(1)
 
   // 事件系统
   // return <EventDemo/>
@@ -41,8 +42,10 @@ console.log("%c'useEffect被执行 %c", "color:green",)
   return (
     <div className="App" onClick={() => {
       debugger;
-      setFlag(!flag)
+      // setFlag(!flag)
+      setCounter(counter + 1);
     }}>
+      <h4>counter:{counter}</h4>
       {
         flag
           ? (

Diff for: docs/img/update.dio

@@ -1927,6 +1927,15 @@ function dispatchAction<S, A>(
     next: (null: any),
   };
 
+  // const queue = {
+  //   dispatch: ƒ (),
+  //   interleaved: null,
+  //   lanes: 0,
+  //   lastRenderedReducer: ƒ basicStateReducer(state, action), // 更新的方法
+  //   lastRenderedState: 1,   // 上一次的值
+  //   pending: {lane: 1, action: 2, eagerReducer: null, eagerState: null, next: {…}},
+  // }
+
   const alternate = fiber.alternate;
   if (
     fiber === currentlyRenderingFiber ||
@@ -1955,6 +1964,7 @@ function dispatchAction<S, A>(
       if (interleaved === null) {
         // This is the first update. Create a circular list.
         update.next = update;
+        //在当前渲染结束时，此队列的交错更新将被转移到待处理队列。
         // At the end of the current render, this queue's interleaved updates will
         // be transfered to the pending queue.
         pushInterleavedQueue(queue);
@@ -1966,6 +1976,7 @@ function dispatchAction<S, A>(
     } else {
       const pending = queue.pending;
       if (pending === null) {
+        // 这是第一次更新。创建一个循环列表。
         // This is the first update. Create a circular list.
         update.next = update;
       } else {
@@ -1979,19 +1990,27 @@ function dispatchAction<S, A>(
       fiber.lanes === NoLanes &&
       (alternate === null || alternate.lanes === NoLanes)
     ) {
+
+      // 队列当前是空的，这意味着我们可以在进入渲染阶段之前急切地计算下一个状态。 
+      // 如果新状态与当前状态相同，我们或许可以完全退出。
+      
       // The queue is currently empty, which means we can eagerly compute the
       // next state before entering the render phase. If the new state is the
       // same as the current state, we may be able to bail out entirely.
-      const lastRenderedReducer = queue.lastRenderedReducer;
+      
+      // typeof action === 'function' ? action(state) : action;
+      const lastRenderedReducer = queue.lastRenderedReducer;  // basicStateReducer  内部会判断 是否为函数，如果为函数则会将上一次的值传进去，得到新的 状态 
       if (lastRenderedReducer !== null) {
         let prevDispatcher;
         if (__DEV__) {
           prevDispatcher = ReactCurrentDispatcher.current;
           ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
         }
         try {
-          const currentState: S = (queue.lastRenderedState: any);
-          const eagerState = lastRenderedReducer(currentState, action);
+          // 取到上一次的值
+          const currentState: S = (queue.lastRenderedState: any);       
+          // 将上一次的值，传进去，如果这次set 是一个函数，则需要上一次的值，否则直接返回新的值
+          const eagerState = lastRenderedReducer(currentState, action); 
 
           // 将急切计算的状态和用于计算它的reducer保存在更新对象上。
           // 如果 reducer 在我们进入渲染阶段时还没有改变，那么无需再次调用 reducer ，就可以使用 eager 状态。
@@ -2000,9 +2019,14 @@ function dispatchAction<S, A>(
           // 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
           // without calling the reducer again.
+
+          // 记录 reducer 和 state
           update.eagerReducer = lastRenderedReducer;
           update.eagerState = eagerState;
           if (is(eagerState, currentState)) {
+            // 快速路径。 我们可以在不安排 React 重新渲染的情况下退出。 
+            // 如果组件由于不同的原因重新渲染并且到那时 reducer 已经更改，我们仍然可能需要稍后重新调整此更新。
+            
             // Fast path. We can bail out without scheduling React to re-render.
             // It's still possible that we'll need to rebase this update later,
             // if the component re-renders for a different reason and by that

Diff for: src/App.js

@@ -21,11 +21,16 @@ let includesLegacySyncCallbacks: boolean = false;
 let isFlushingSyncQueue: boolean = false;
 
 export function scheduleSyncCallback(callback: SchedulerCallback) {
+  
+  // 将此回调推送到内部队列中。 我们将在下一个滴答声中刷新它们，
+  // 或者如果有东西调用 `flushSyncCallbackQueue` 则更早。
+
   // Push this callback into an internal queue. We'll flush these either in
   // the next tick, or earlier if something calls `flushSyncCallbackQueue`.
   if (syncQueue === null) {
     syncQueue = [callback];
   } else {
+    // 推送到现有队列。 不需要安排回调，因为我们在创建队列时已经安排了一个回调。
     // Push onto existing queue. Don't need to schedule a callback because
     // we already scheduled one when we created the queue.
     syncQueue.push(callback);

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

@@ -675,10 +675,13 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
 function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
   const existingCallbackNode = root.callbackNode;
 
+  //检查是否有其他线路被其他工作占用。如果是，将它们标记为过期，
+  //所以我们知道下一个工作。
   // Check if any lanes are being starved by other work. If so, mark them as
   // expired so we know to work on those next.
   markStarvedLanesAsExpired(root, currentTime);
 
+  // 确定接下来的车道，以及它们的优先级。
   // Determine the next lanes to work on, and their priority.
   const nextLanes = getNextLanes(
     root,
@@ -696,10 +699,14 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
   }
 
   // We use the highest priority lane to represent the priority of the callback.
+  // 我们使用最高优先级通道来表示回调的优先级。  newCallbackPriority = 1
   const newCallbackPriority = getHighestPriorityLane(nextLanes);
 
+  // 检查是否有一个已存在的任务。我们也许可以重新利用它。
   // Check if there's an existing task. We may be able to reuse it.
   const existingCallbackPriority = root.callbackPriority;
+
+  // newCallbackPriority = 1
   if (existingCallbackPriority === newCallbackPriority) {
     if (__DEV__) {
       // If we're going to re-use an existing task, it needs to exist.
@@ -714,20 +721,29 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
         );
       }
     }
+
+    // 优先级没有改变。我们可以重用现有的任务。出口。 
     // The priority hasn't changed. We can reuse the existing task. Exit.
     return;
   }
 
   if (existingCallbackNode != null) {
+    // 取消现有的回调。我们将在下面安排一个新的。 
     // Cancel the existing callback. We'll schedule a new one below.
     cancelCallback(existingCallbackNode);
   }
 
+  // 安排一个新的回调
   // Schedule a new callback.
   let newCallbackNode;
-  if (newCallbackPriority === SyncLane) {
+  if (newCallbackPriority === SyncLane) {     // 判断是否同步赛道
+    // 特殊情况: 同步React回调 被安排在一个特殊的内部队列
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
+    /* 
+      export const LegacyRoot = 0;      // render
+      export const ConcurrentRoot = 1;  // conCurrentRoot 模式
+     */
     if (root.tag === LegacyRoot) {
       scheduleLegacySyncCallback(performSyncWorkOnRoot.bind(null, root));
     } else {

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

@@ -519,7 +519,7 @@ function forceFrameRate(fps) {
 }
 
 const performWorkUntilDeadline = () => {
-  debugger;
+  // debugger;
   if (scheduledHostCallback !== null) {
     const currentTime = getCurrentTime();
     // Yield after `yieldInterval` ms, regardless of where we are in the vsync