current position:Home>React beginWork

React beginWork

2021-08-23 04:06:38 snowofcat

beginWork

params

  1. current: mount when : Only rootFiber and rootWorkInProgrss Of current !== null; other current = null
  2. workInProgress
  3. renderLanes

according to tag Perform different methods ;

  1. mountIndeterminateComponent: Not sure function still class
  2. updateFunctionComponent:

    • renderWithHooks
    • reconcileChildren
  3. updateClassComponent:

    • The code is as follows
    //  No instance object 
    if (instance === null) {
      //  Yes  current  object 
      if (current !== null) {
        current.alternate = null;
        workInProgress.alternate = null;
        workInProgress.flags |= Placement;
      }
      /**
       * 1.  Create instance object , take  state  Mount to  memoizedState
       * 2.  perform  adoptClassInstance
       */
      constructClassInstance(workInProgress, Component, nextProps);
      /**
       * 1. initializeUpdateQueue:  initialization  fiber  Of  updateQueue
       * 2. processUpdateQueue:  Calculation  state  value 
       */
      mountClassInstance(workInProgress, Component, nextProps, renderLanes);
      shouldUpdate = true;
    } else if (current === null) {
      //  Object with instance , No,  current  object 
      //  reusing  instace  value 
      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

Code

  1. initializeUpdateQueue

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

    • Calculation state value
    • mount: take state Assign values to the workInProgress.memoizedState; take updateQueue.baseState assignment
    • 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 Use
    • workInProgress.stateNode = instance;
    function adoptClassInstance(workInProgress, instance) {
      instance.updater = classComponentUpdater;
      workInProgress.stateNode = instance;
    
      set(instance, workInProgress);
    
      {
        instance._reactInternalInstance = fakeInternalInstance;
      }
    }
  4. classComponentUpdater object

    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;
    • Execute function components : Component(props, secondArg); In the function component hooks Will perform ; take hooks Mount to 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;
    }

copyright notice
author[snowofcat],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210823040636267M.html

Random recommended