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()