react fiber 架构渲染分析

react第一次渲染

数据结构

function FiberNode(tag, pendingProps, key, mode) {
// Instance
this.tag = tag;
this.key = key;
this.elementType = null;
this.type = null;
this.stateNode = null;
// Fiber
this.return = null;
this.child = null;
this.sibling = null;
this.index = 0;
this.ref = null;
this.pendingProps = pendingProps;
this.memoizedProps = null;
this.updateQueue = null;
this.memoizedState = null;
this.contextDependencies = null;
this.mode = mode;
this.effectTag = NoEffect;
this.nextEffect = null;
this.firstEffect = null;
this.lastEffect = null;
this.expirationTime = NoWork;
this.childExpirationTime = NoWork;
this.alternate = null;
if (enableProfilerTimer) {
Object.preventExtension().
this.actualDuration = Number.NaN;
this.actualStartTime = Number.NaN;
this.selfBaseDuration = Number.NaN;
this.treeBaseDuration = Number.NaN;
this.actualDuration = 0;
this.actualStartTime = -1;
this.selfBaseDuration = 0;
this.treeBaseDuration = 0;
}
}

reactDOM.render

legacyRenderSubtreeIntoContainer

unbatchedUpdates

root.render

updateContainer(children, root, null, work._onCommit);

updateContainerAtExpirationTime

scheduleRootUpdate

scheduleWork

requestWork

performSyncWork

performWork

performWorkOnRoot

renderRoot

workLoop

performUnitOfWork

判断next 是否存在 如果存在就return 出去继续深度遍历它beginWork，如果不存在next说明没有子组件了要走 completeUnitOfWork

beginWork

这里开始渲染每一个单位组件
1.hooks
有全局变量ReactCurrentDispatcher$1 === ReactCurrentDispatcher;
当workInProgress.tag为2的时候 此组件为hooks组件对应为IndeterminateComponent，执行mountIndeterminateComponent()方法,进入方法后调用renderWithHooks()

function renderWithHooks(current, workInProgress, Component, props, refOrContext, nextRenderExpirationTime) {
   
  renderExpirationTime = nextRenderExpirationTime;
  currentlyRenderingFiber$1 = workInProgress;
  nextCurrentHook = current !== null ? current.memoizedState : null;//如果是第一次渲染这里为空值
  {
   
    if (nextCurrentHook !== null) {
   
      ReactCurrentDispatcher$1.current = HooksDispatcherOnUpdateInDEV;//更新的时候走这里nextCurrentHook 不为空
    } else if (hookTypesDev !== null) {
   
      ReactCurrentDispatcher$1.current = HooksDispatcherOnMountWithHookTypesInDEV;
    } else {
   
      ReactCurrentDispatcher$1.current = HooksDispatcherOnMountInDEV;//第一次渲染走这里
    }
  }
  var children = Component(props, refOrContext);//这里执行函数组件然后执行useState方法
  return children;
}
function useState(initialState) {
   
      var dispatcher = resolveDispatcher(