current position:Home>React commitRoot

React commitRoot

2021-08-23 04:15:37 snowofcat

commitRoot

  1. Global variables workInProgressRoot、workInProgress、workInProgressRootRenderLanes Set to The default value is
  2. obtain workInProgress Upper firstEffect(completeUnitOfWork Generated )

    if (finishedWork.flags > PerformedWork) {
      if (finishedWork.lastEffect !== null) {
        finishedWork.lastEffect.nextEffect = finishedWork;
        firstEffect = finishedWork.firstEffect;
      } else {
        firstEffect = finishedWork;
      }
    }

commitBeforeMutationEffects

  1. before mutation: Operate on different components

    • class Components : obtain snapshot
    • Other components : Don't deal with

commitMutationEffects

  1. Add components to real dom Under the node —— div#root.appendChild(child)
  2. HostComponent: commitUpdate Event registration

commitLayoutEffects

function

  1. ref mount : commitAttachRef: ref.current = current.stateNode
  2. commitLifeCycles

    1. Function component : commitHookEffectListMount —— Take out finishedWork.updateQueue, Execute the inside hooks
    2. class Components :

      • Execution lifecycle approach , componentDidUpdate(props, state, snapshot)
      • commitUpdateQueue

Code

  1. commitUpdateQueue: perform updateQueue The method in

    function commitUpdateQueue(finishedWork, finishedQueue, instance) {
      var effects = finishedQueue.effects;
      finishedQueue.effects = null;
    
      if (effects !== null) {
        for (var i = 0; i < effects.length; i++) {
          var effect = effects[i];
          var callback = effect.callback;
    
          if (callback !== null) {
            effect.callback = null;
            callCallback(callback, instance);
          }
        }
      }
    }

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

Random recommended