关于react.js:React-commitRoot

63次阅读

共计 1067 个字符,预计需要花费 3 分钟才能阅读完成。

commitRoot

  1. 全局变量 workInProgressRoot、workInProgress、workInProgressRootRenderLanes 设为 默认值
  2. 获取 workInProgress 上的 firstEffect(completeUnitOfWork 生成的)

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

commitBeforeMutationEffects

  1. before mutation: 对不同组件进行操作

    • class 组件: 获取 snapshot
    • 其余组件: 不解决

commitMutationEffects

  1. 将组件退出到实在的 dom 节点下 —— div#root.appendChild(child)
  2. HostComponent: commitUpdate 进行事件注册

commitLayoutEffects

性能

  1. ref 挂载: commitAttachRef: ref.current = current.stateNode
  2. commitLifeCycles

    1. 函数组件: commitHookEffectListMount —— 取出 finishedWork.updateQueue,执行外面的 hooks
    2. class 组件:

      • 执行生命周期办法, componentDidUpdate(props, state, snapshot)
      • commitUpdateQueue

代码

  1. commitUpdateQueue: 执行 updateQueue 中的办法

    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);
          }
        }
      }
    }

正文完
 0