React beginWork

beginWork

params

1. current: mount 时：只有 rootFiber 和 rootWorkInProgrss 的 current !== null；其他 current = null
2. workInProgress
3. renderLanes

根据 tag 执行不同方法；

1. mountIndeterminateComponent: 不确定是 function 还是 class

2. updateFunctionComponent:

   • renderWithHooks
   • reconcileChildren

3. updateClassComponent:

   • 代码如下

   // 没有实例对象
   if (instance === null) {
     // 有 current 对象
     if (current !== null) {
       current.alternate = null;
       workInProgress.alternate = null;
       workInProgress.flags |= Placement;
     }
     /**
      * 1. 创建实例对象，将 state 挂载到 memoizedState
      * 2. 执行 adoptClassInstance
      */
     constructClassInstance(workInProgress, Component, nextProps);
     /**
      * 1. initializeUpdateQueue: 初始化 fiber 的 updateQueue
      * 2. processUpdateQueue: 计算 state 值
      */
     mountClassInstance(workInProgress, Component, nextProps, renderLanes);
     shouldUpdate = true;
   } else if (current === null) {
     // 有实例对象，没有 current 对象
     // 重用 instace 值
     shouldUpdate = resumeMountClassInstance(
       workInProgress,
       Component,
       nextProps,
       renderLanes
     );
   } else {
     /**
      * 1. cloneUpdateQueue
      * 2. processUpdateQueue
      */
     shouldUpdate = updateClassInstance(
       current,
       workInProgress,
       Component,
       nextProps,
       renderLanes
     );
   }

   • reconcileChildren

4. updateHostRoot: FiberRoot

   • cloneUpdateQueue
   • processUpdateQueue
   • reconcileChildren

代码

1. initializeUpdateQueue

   function initializeUpdateQueue(fiber) {
     var queue = {
       baseState: fiber.memoizedState,
       firstBaseUpdate: null,
       lastBaseUpdate: null,
       shared: {
         pending: null,
       },
       effects: null,
     };
     fiber.updateQueue = queue;
   }

2. processUpdateQueue

   • 计算 state 值
   • mount: 将 state 赋值到 workInProgress.memoizedState；将 updateQueue.baseState 赋值
   • update

   function processUpdateQueue(workInProgress, props, instance, renderLanes) {
     var queue = workInProgress.updateQueue;
     hasForceUpdate = false;
   
     {
       currentlyProcessingQueue = queue.shared;
     }
   
     var firstBaseUpdate = queue.firstBaseUpdate;
     var lastBaseUpdate = queue.lastBaseUpdate;
     var pendingQueue = queue.shared.pending;
   
     if (pendingQueue !== null) {
       queue.shared.pending = null;
   
       var lastPendingUpdate = pendingQueue;
       var firstPendingUpdate = lastPendingUpdate.next;
       lastPendingUpdate.next = null;
   
       if (lastBaseUpdate === null) {
         firstBaseUpdate = firstPendingUpdate;
       } else {
         lastBaseUpdate.next = firstPendingUpdate;
       }
   
       lastBaseUpdate = lastPendingUpdate;
   
       var current = workInProgress.alternate;
   
       if (current !== null) {
         var currentQueue = current.updateQueue;
         var currentLastBaseUpdate = currentQueue.lastBaseUpdate;
   
         if (currentLastBaseUpdate !== lastBaseUpdate) {
           if (currentLastBaseUpdate === null) {
             currentQueue.firstBaseUpdate = firstPendingUpdate;
           } else {
             currentLastBaseUpdate.next = firstPendingUpdate;
           }
   
           currentQueue.lastBaseUpdate = lastPendingUpdate;
         }
       }
     }
   
     if (firstBaseUpdate !== null) {
       var newState = queue.baseState;
   
       var newLanes = NoLanes;
       var newBaseState = null;
       var newFirstBaseUpdate = null;
       var newLastBaseUpdate = null;
       var update = firstBaseUpdate;
   
       do {
         var updateLane = update.lane;
         var updateEventTime = update.eventTime;
   
         if (!isSubsetOfLanes(renderLanes, updateLane)) {
           var clone = {
             eventTime: updateEventTime,
             lane: updateLane,
             tag: update.tag,
             payload: update.payload,
             callback: update.callback,
             next: null,
           };
   
           if (newLastBaseUpdate === null) {
             newFirstBaseUpdate = newLastBaseUpdate = clone;
             newBaseState = newState;
           } else {
             newLastBaseUpdate = newLastBaseUpdate.next = clone;
           }
   
           newLanes = mergeLanes(newLanes, updateLane);
         } else {
           if (newLastBaseUpdate !== null) {
             var _clone = {
               eventTime: updateEventTime,
               lane: NoLane,
               tag: update.tag,
               payload: update.payload,
               callback: update.callback,
               next: null,
             };
             newLastBaseUpdate = newLastBaseUpdate.next = _clone;
           }
   
           newState = getStateFromUpdate(
             workInProgress,
             queue,
             update,
             newState,
             props,
             instance
           );
           var callback = update.callback;
   
           if (callback !== null) {
             workInProgress.flags |= Callback;
             var effects = queue.effects;
   
             if (effects === null) {
               queue.effects = [update];
             } else {
               effects.push(update);
             }
           }
         }
   
         update = update.next;
   
         if (update === null) {
           pendingQueue = queue.shared.pending;
   
           if (pendingQueue === null) {
             break;
           } else {
             var _lastPendingUpdate = pendingQueue;
   
             var _firstPendingUpdate = _lastPendingUpdate.next;
             _lastPendingUpdate.next = null;
             update = _firstPendingUpdate;
             queue.lastBaseUpdate = _lastPendingUpdate;
             queue.shared.pending = null;
           }
         }
       } while (true);
   
       if (newLastBaseUpdate === null) {
         newBaseState = newState;
       }
   
       queue.baseState = newBaseState;
       queue.firstBaseUpdate = newFirstBaseUpdate;
       queue.lastBaseUpdate = newLastBaseUpdate;
   
       markSkippedUpdateLanes(newLanes);
       workInProgress.lanes = newLanes;
       workInProgress.memoizedState = newState;
     }
   
     {
       currentlyProcessingQueue = null;
     }
   }

3. adoptClassInstance

   • instance.update: this.setState 使用
   • workInProgress.stateNode = instance;

   function adoptClassInstance(workInProgress, instance) {
     instance.updater = classComponentUpdater;
     workInProgress.stateNode = instance;
   
     set(instance, workInProgress);
   
     {
       instance._reactInternalInstance = fakeInternalInstance;
     }
   }

4. classComponentUpdater 对象

   var classComponentUpdater = {
     isMounted: isMounted,
     enqueueSetState: function (inst, payload, callback) {
       var fiber = get(inst);
       var eventTime = requestEventTime();
       var lane = requestUpdateLane(fiber);
       var update = createUpdate(eventTime, lane);
       update.payload = payload;
   
       if (callback !== undefined && callback !== null) {
         {
           warnOnInvalidCallback(callback, "setState");
         }
   
         update.callback = callback;
       }
   
       enqueueUpdate(fiber, update);
       scheduleUpdateOnFiber(fiber, lane, eventTime);
     },
     enqueueReplaceState: function (inst, payload, callback) {
       var fiber = get(inst);
       var eventTime = requestEventTime();
       var lane = requestUpdateLane(fiber);
       var update = createUpdate(eventTime, lane);
       update.tag = ReplaceState;
       update.payload = payload;
   
       if (callback !== undefined && callback !== null) {
         {
           warnOnInvalidCallback(callback, "replaceState");
         }
   
         update.callback = callback;
       }
   
       enqueueUpdate(fiber, update);
       scheduleUpdateOnFiber(fiber, lane, eventTime);
     },
     enqueueForceUpdate: function (inst, callback) {
       var fiber = get(inst);
       var eventTime = requestEventTime();
       var lane = requestUpdateLane(fiber);
       var update = createUpdate(eventTime, lane);
       update.tag = ForceUpdate;
   
       if (callback !== undefined && callback !== null) {
         {
           warnOnInvalidCallback(callback, "forceUpdate");
         }
   
         update.callback = callback;
       }
   
       enqueueUpdate(fiber, update);
       scheduleUpdateOnFiber(fiber, lane, eventTime);
     },
   };

5. renderWithHooks

   • currentlyRenderingFiber$1 = workInProgress;
   • 执行函数组件: Component(props, secondArg)；函数组件中的 hooks 也会执行；将 hooks 挂载到 Fiber.memoizedState

   function mountWorkInProgressHook() {
     var hook = {
       memoizedState: null,
       baseState: null,
       baseQueue: null,
       queue: null,
       next: null,
     };
   
     if (workInProgressHook === null) {
       currentlyRenderingFiber$1.memoizedState = workInProgressHook = hook;
     } else {
       workInProgressHook = workInProgressHook.next = hook;
     }
   
     return workInProgressHook;
   }