update docs

Author: AfterThreeYears

docs/React#updateQueue.md

@@ -71,38 +71,28 @@ export function processUpdateQueue<State>(
   instance: any,
   renderExpirationTime: ExpirationTime,
 ): void {
-  // This is always non-null on a ClassComponent or HostRoot
   const queue: UpdateQueue<State> = (workInProgress.updateQueue: any);
 
   hasForceUpdate = false;
 
   let firstBaseUpdate = queue.firstBaseUpdate;
   let lastBaseUpdate = queue.lastBaseUpdate;
 
-  // Check if there are pending updates. If so, transfer them to the base queue.
   // 查看当前fiber上的BaseQueue是否有没处理的update，有的话把pendingQueue链到后面，没有就直接复制，清空pendingQueue
   let pendingQueue = queue.shared.pending;
   if (pendingQueue !== null) {
     queue.shared.pending = null;
 
-    // The pending queue is circular. Disconnect the pointer between first
-    // and last so that it's non-circular.
     const lastPendingUpdate = pendingQueue;
     const firstPendingUpdate = lastPendingUpdate.next;
     lastPendingUpdate.next = null;
-    // Append pending updates to base queue
     if (lastBaseUpdate === null) {
       firstBaseUpdate = firstPendingUpdate;
     } else {
       lastBaseUpdate.next = firstPendingUpdate;
     }
     lastBaseUpdate = lastPendingUpdate;
 
-    // If there's a current queue, and it's different from the base queue, then
-    // we need to transfer the updates to that queue, too. Because the base
-    // queue is a singly-linked list with no cycles, we can append to both
-    // lists and take advantage of structural sharing.
-    // TODO: Pass `current` as argument
     const current = workInProgress.alternate;
     if (current !== null) {
       // This is always non-null on a ClassComponent or HostRoot
@@ -119,9 +109,7 @@ export function processUpdateQueue<State>(
     }
   }
 
-  // These values may change as we process the queue.
   if (firstBaseUpdate !== null) {
-    // Iterate through the list of updates to compute the result.
     let newState = queue.baseState;
     let newExpirationTime = NoWork;
 
@@ -134,9 +122,6 @@ export function processUpdateQueue<State>(
       const updateExpirationTime = update.expirationTime;
       if (updateExpirationTime < renderExpirationTime) {
         // update优先级不够，不执行，拷贝一份当前的update，完事后赋值给BaseQueue，等待下一次调度
-        // Priority is insufficient. Skip this update. If this is the first
-        // skipped update, the previous update/state is the new base
-        // update/state.
         const clone: Update<State> = {
           expirationTime: update.expirationTime,
           suspenseConfig: update.suspenseConfig,
@@ -153,13 +138,11 @@ export function processUpdateQueue<State>(
         } else {
           newLastBaseUpdate = newLastBaseUpdate.next = clone;
         }
-        // Update the remaining priority in the queue.
         if (updateExpirationTime > newExpirationTime) {
           newExpirationTime = updateExpirationTime;
         }
       } else {
         // update先级足够
-        // This update does have sufficient priority.
 
         // 应该是中断相关，猜测是需要保证update调用的连续性，否则可能有多个结果
         if (newLastBaseUpdate !== null) {
@@ -212,13 +195,6 @@ export function processUpdateQueue<State>(
     queue.firstBaseUpdate = newFirstBaseUpdate;
     queue.lastBaseUpdate = newLastBaseUpdate;
 
-    // Set the remaining expiration time to be whatever is remaining in the queue.
-    // This should be fine because the only two other things that contribute to
-    // expiration time are props and context. We're already in the middle of the
-    // begin phase by the time we start processing the queue, so we've already
-    // dealt with the props. Context in components that specify
-    // shouldComponentUpdate is tricky; but we'll have to account for
-    // that regardless.
     markUnprocessedUpdateTime(newExpirationTime);
     workInProgress.expirationTime = newExpirationTime;
     workInProgress.memoizedState = newState;
@@ -259,7 +235,6 @@ function mountState<S>(
 ): [S, Dispatch<BasicStateAction<S>>] {
   const hook = mountWorkInProgressHook();
   if (typeof initialState === 'function') {
-    // $FlowFixMe: Flow doesn't like mixed types
     initialState = initialState();
   }
   hook.memoizedState = hook.baseState = initialState;
@@ -294,17 +269,12 @@ function updateReducer<S, I, A>(
 
   const current: Hook = ();
 
-  // The last rebase update that is NOT part of the base state.
   let baseQueue = current.baseQueue;
 
-  // The last pending update that hasn't been processed yet.
   // 把pengdingQueue链接到baseQueue后，清除pengding
   const pendingQueue = queue.pending;
   if (pendingQueue !== null) {
-    // We have new updates that haven't been processed yet.
-    // We'll add them to the base queue.
     if (baseQueue !== null) {
-      // Merge the pending queue and the base queue.
       const baseFirst = baseQueue.next;
       const pendingFirst = pendingQueue.next;
       baseQueue.next = pendingFirst;
@@ -315,7 +285,6 @@ function updateReducer<S, I, A>(
   }
 
   if (baseQueue !== null) {
-    // We have a queue to process.
     const first = baseQueue.next;
     let newState = current.baseState;
 
@@ -327,9 +296,6 @@ function updateReducer<S, I, A>(
       const updateExpirationTime = update.expirationTime;
       if (updateExpirationTime < renderExpirationTime) {
         // 优先级不足，把这个update链到newBaseQueueFirst，等循环结束后，重设到baseQueue, 等待下一次的调度
-        // Priority is insufficient. Skip this update. If this is the first
-        // skipped update, the previous update/state is the new base
-        // update/state.
         const clone: Update<S, A> = {
           expirationTime: update.expirationTime,
           suspenseConfig: update.suspenseConfig,
@@ -344,17 +310,14 @@ function updateReducer<S, I, A>(
         } else {
           newBaseQueueLast = newBaseQueueLast.next = clone;
         }
-        // Update the remaining priority in the queue.
         if (updateExpirationTime > currentlyRenderingFiber.expirationTime) {
           currentlyRenderingFiber.expirationTime = updateExpirationTime;
           markUnprocessedUpdateTime(updateExpirationTime);
         }
       } else {
-        // This update does have sufficient priority.
-
         if (newBaseQueueLast !== null) {
           const clone: Update<S, A> = {
-            expirationTime: Sync, // This update is going to be committed so we never want uncommit it.
+            expirationTime: Sync,
             suspenseConfig: update.suspenseConfig,
             action: update.action,
             eagerReducer: update.eagerReducer,
@@ -364,21 +327,8 @@ function updateReducer<S, I, A>(
           newBaseQueueLast = newBaseQueueLast.next = clone;
         }
 
-        // Mark the event time of this update as relevant to this render pass.
-        // TODO: This should ideally use the true event time of this update rather than
-        // its priority which is a derived and not reverseable value.
-        // TODO: We should skip this update if it was already committed but currently
-        // we have no way of detecting the difference between a committed and suspended
-        // update here.
-        markRenderEventTimeAndConfig(
-          updateExpirationTime,
-          update.suspenseConfig,
-        );
-
         // 根据reducer处理旧state，生成新state
         if (update.eagerReducer === reducer) {
-          // If this update was processed eagerly, and its reducer matches the
-          // current reducer, we can use the eagerly computed state.
           newState = ((update.eagerState: any): S);
         } else {
           const action = update.action;
@@ -439,11 +389,9 @@ function dispatchAction<S, A>(
     next: (null: any),
   };
 
-  // Append the update to the end of the list.
   // 把新update挂载到pending上
   const pending = queue.pending;
   if (pending === null) {
-    // This is the first update. Create a circular list.
     update.next = update;
   } else {
     update.next = pending.next;
@@ -457,38 +405,24 @@ function dispatchAction<S, A>(
     (alternate !== null && alternate === currentlyRenderingFiber)
   ) {
     // 在render阶段创建了更新，需要确认是不是死循环
-    // This is a render phase update. Stash it in a lazily-created map of
-    // queue -> linked list of updates. After this render pass, we'll restart
-    // and apply the stashed updates on top of the work-in-progress hook.
     didScheduleRenderPhaseUpdateDuringThisPass = didScheduleRenderPhaseUpdate = true;
     update.expirationTime = renderExpirationTime;
   } else {
     if (
       fiber.expirationTime === NoWork &&
       (alternate === null || alternate.expirationTime === NoWork)
     ) {
-      // 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;
       if (lastRenderedReducer !== null) {
         let prevDispatcher;
         try {
           const currentState: S = (queue.lastRenderedState: any);
           // 根据[state, setState]，根据setState创建出新的state
           const eagerState = lastRenderedReducer(currentState, action);
-          // 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
-          // without calling the reducer again.
           update.eagerReducer = lastRenderedReducer;
           update.eagerState = eagerState;
           // 新老state对比，没有更新则可以不启动调度
           if (is(eagerState, currentState)) {
-            // 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
-            // time the reducer has changed.
             return;
           }
         } catch (error) {

docs/React#useEffect#useLayoutEffect.md

@@ -8,9 +8,9 @@
 
 ```js
 function mountEffect(
-  create: () => (() => void) | void,
-  deps: Array<mixed> | void | null,
-): void {
+  create,
+  deps,
+) {
   return mountEffectImpl(
     UpdateEffect | PassiveEffect,
     HookPassive,
@@ -20,9 +20,9 @@ function mountEffect(
 }
 
 function updateEffect(
-  create: () => (() => void) | void,
-  deps: Array<mixed> | void | null,
-): void {
+  create,
+  deps,
+) {
   return updateEffectImpl(
     UpdateEffect | PassiveEffect,
     HookPassive,
@@ -35,24 +35,24 @@ function updateEffect(
 
 ```js
 function mountLayoutEffect(
-  create: () => (() => void) | void,
-  deps: Array<mixed> | void | null,
-): void {
+  create,
+  deps,
+) {
   return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
 }
 
 function updateLayoutEffect(
-  create: () => (() => void) | void,
-  deps: Array<mixed> | void | null,
-): void {
+  create,
+  deps,
+) {
   return updateEffectImpl(UpdateEffect, HookLayout, create, deps);
 }
 ```
 
 ### 通用
 
 ```js
-function mountEffectImpl(fiberEffectTag, hookEffectTag, create, deps): void {
+function mountEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
   const hook = mountWorkInProgressHook();
   const nextDeps = deps === undefined ? null : deps;
   currentlyRenderingFiber.effectTag |= fiberEffectTag;
@@ -64,7 +64,7 @@ function mountEffectImpl(fiberEffectTag, hookEffectTag, create, deps): void {
   );
 }
 
-function updateEffectImpl(fiberEffectTag, hookEffectTag, create, deps): void {
+function updateEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
   const hook = updateWorkInProgressHook();
   const nextDeps = deps === undefined ? null : deps;
   let destroy = undefined;
@@ -98,12 +98,12 @@ function pushEffect(tag, create, destroy, deps) {
     destroy,
     deps,
     // Circular
-    next: (null: any),
+    next: null,
   };
-  let componentUpdateQueue: null | FunctionComponentUpdateQueue = (currentlyRenderingFiber.updateQueue: any);
+  let componentUpdateQueue = (currentlyRenderingFiber.updateQueue: any);
   if (componentUpdateQueue === null) {
     componentUpdateQueue = createFunctionComponentUpdateQueue();
-    currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
+    currentlyRenderingFiber.updateQueue = componentUpdateQueue;
     componentUpdateQueue.lastEffect = effect.next = effect;
   } else {
     const lastEffect = componentUpdateQueue.lastEffect;
@@ -118,7 +118,6 @@ function pushEffect(tag, create, destroy, deps) {
   }
   return effect;
 }
-
 ```
 
 

update.json

@@ -1,13 +1,13 @@
 {
   "React#updateQueue.md": 1605602314209,
-  "React中的commit流程.md": 1605341885210,
   "React#useEffect#useLayoutEffect.md": 1605679096344,
   "CSS grid介绍.md": 1596791290447,
   "DNS简介.md": 1596791290447,
   "ES6 Iterator要点总结.md": 1596791290447,
   "HTTPS加密过程.md": 1596791290447,
   "ReactDOM#render工作机制.md": 1602811104559,
   "React中Context的使用和实现.md": 1601977560699,
+  "React中的commit流程.md": 1605341885210,
   "React中的reconcile流程.md": 1604584251074,
   "React中的二进制类型.md": 1596791290447,
   "React中的调度算法.md": 1604325802933,