react源码方法调用结构图

2020-01-15  本文已影响0人  LazyG

1.ReactDom.render

ReactDom.render() {
    return legacyRenderSubtreeIntoContainer();
}

2.legacyRenderSubtreeIntoContainer()

legacyRenderSubtreeIntoContainer() {
    topLevelUpdateWarnings();
    
    // 创建ReactRoot
    legacyCreateRootFromDOMContainer() {
        return ReactRoot() {
             createContainer() {
                    // 创建FiberRoot
                    return createFiberRoot() {
                             var RootFiber = createHostRootFiber()  {
                                        // 创建RootFiber对象
                                       return createFiber() {
                                             return FiberNode() {
                                                     return Fiber(Fiber-Object)
                                              }
                                        }                        
                               }
                              return {
                                current: RootFiber
                                 .......
                              } (FiberRoot-Object)
                      }
               }
          }
      }
     // 调用ReactRoot.render
    ReactRoot.render()
}

ReactRoot.render()

ReactRoot.render() {
    var work = new ReactWork();
    updateContainer()
}

updateContainer 开始更新容器

updateContainer()

updateContainer() {
      // 获取当前时间
      requestCurrentTime()
       // 计算Fiber的截止时间
      computeExpirationForFiber()
      //在到期时更新容器
      return updateContainerAtExpirationTime()
}

requestCurrentTime()

requestCurrentTime() {
    // 查找最高优先级根
    findHighestPriorityRoot()
    //重新计算当前渲染时间
     recomputeCurrentRendererTime()
}

updateContainerAtExpirationTime

updateContainerAtExpirationTime() {
      //获取子树的上下文
      getContextForSubtree() 
    //根更新时间表
      scheduleRootUpdate()
}

scheduleRootUpdate

scheduleRootUpdate() {
    //创建更新对象
    var update = createUpdate(expirationTime);
    //冲洗被动效果
     flushPassiveEffects()
    //排队更新
      enqueueUpdate()
      //安排工作
     scheduleWork()
}

createUpdate 返回 Update 对象

function createUpdate(expirationTime) {
  return {
    expirationTime: expirationTime,

    tag: UpdateState,
    payload: null,
    callback: null,

    next: null,
    nextEffect: null
  };
}

enqueueUpdate

enqueueUpdate(){
  //创建更新队列
  createUpdateQueue()
}

createUpdateQueue 创建更新队列

function createUpdateQueue(baseState) {
  var queue = {
    baseState: baseState,
    firstUpdate: null,
    lastUpdate: null,
    firstCapturedUpdate: null,
    lastCapturedUpdate: null,
    firstEffect: null,
    lastEffect: null,
    firstCapturedEffect: null,
    lastCapturedEffect: null
  };
  return queue;
}

scheduleWork 安排工作

scheduleWork

scheduleWork() {
    var root = scheduleWorkToRoot()
    //标记待定优先级
    markPendingPriorityLevel()
    requestWork()
}

scheduleWorkToRoot

scheduleWorkToRoot() {
    //记录进度更新
    recordScheduleUpdate()
}

markPendingPriorityLevel

markPendingPriorityLevel() {
    //找到下一个有效期
    findNextExpirationTimeToWorkOn()
}

requestWork 请求工作

requestWork

requestWork() {
//在调度中添加Root
addRootToSchedule()
performSyncWork()
}

performSyncWork

performSyncWork() {
    performWork()
}

performWork

performWork() {
//查找最高优先级根
findHighestPriorityRoot()
performWorkOnRoot()
}

performWorkOnRoot

performWorkOnRoot(){
  //渲染根节点
    renderRoot()
// 完成渲染
    completeRoot()
}

renderRoot渲染根节点

renderRoot

renderRoot(){
//冲洗被动效果
flushPassiveEffects()
//重置堆栈
resetStack()
//创建workInProgress
createWorkInProgress()
//启动工作循环计时器
startWorkLoopTimer()
//循环工作
workLoop()
//重置上下文依赖性
resetContextDependences()
//重置Hooks
resetHooks()
// 完成工作
onComplete
}

createWorkInProgress

createWorkInProgress() {
    // 创建Fiber对象
    createFiber()
}

createFiber

createFiber(){
//就是返回个Fiber对象
return new FiberNode(tag, pendingProps, key, mode);
}

startWorkLoopTimer

startWorkLoopTimer(){
//标记
beginMark()
//简历计时器
resumeTimers()
}

resumeTimers 不知道干啥的

resumeTimers(){
    resumeTimersRecursively()
}

workLoop工作循环

workLoop

workLoop() {
 performUnitOfWork
}

performUnitOfWork

performUnitOfWork() {
//定时器开始工作
startWorkTimer()
//分析器启动计时器
startProfilerTimer()
//开始工作
beginWork()
///如果运行，停止分析器计时器并记录增量
stopProfilerTimerIfRunningAndRecordDelta()
// 完成节点工作
completeUnitOfWork
}

beginWork开始工作

beginWork

会根据不同的tag进行不同的处理，例如：LazyComponent，FunctionComponent，ClassComponent，这里先走HostRoot类型

beginWork() {
if( tag === HostRoot ) {
updateHostRoot()
}  
}

updateHostRoot 更新root

updateHostRoot

updateHostRoot(){
pushHostRootContext()
processUpdateQueue()
getStateFromUpdate()
reconcileChildren()
// 重置Hydration状态
resetHydrationState()
}

pushHostRootContext

pushHostRootContext(){
pushTopLevelContextObject()
pushHostContainer()
}

pushHostContainer

pushHostContainer(){
getRootHostContext
}

processUpdateQueue

processUpdateQueue(){
ensureWorkInProgressQueueIsAClone()
}

ensureWorkInProgressQueueIsAClone

ensureWorkInProgressQueueIsAClone(){
cloneUpdateQueue()
getStateFromUpdate()
}

cloneUpdateQueue

function cloneUpdateQueue(currentQueue) {
  var queue = {
    baseState: currentQueue.baseState,
    firstUpdate: currentQueue.firstUpdate,
    lastUpdate: currentQueue.lastUpdate,

    // TODO: With resuming, if we bail out and resuse the child tree, we should
    // keep these effects.
    firstCapturedUpdate: null,
    lastCapturedUpdate: null,

    firstEffect: null,
    lastEffect: null,

    firstCapturedEffect: null,
    lastCapturedEffect: null
  };
  return queue;
}

reconcileChildren 更新root

reconcileChildren

reconcileChildren(){
reconcileChildFibers()
}

reconcileChildFibers 协调子节点的Fibers

reconcileChildFibers(){
placeSingleChild(reconcileSingleElement())
}

placeSingleChild

placeSingleChild(){
}

reconcileSingleElement

reconcileSingleElement(){
createFiberFromElement()
coerceRef()
}

createFiberFromElement 根据Element创建Fiber

createFiberFromElement(){
createFiberFromTypeAndProps()
}

createFiberFromTypeAndProps 根据type和props创建Fiber

createFiberFromTypeAndProps(){
// 创建Fiber对象
createFiber()
}

completeUnitOfWork 完成更新

completeUnitOfWork

completeUnitOfWork(){
completeWork()
//如果运行，停止分析器计时器并记录增量
stopProfilerTimerIfRunningAndRecordDelta()
//计时器停止工作
stopWorkTimer()
//重置下一个任务的ExpirationTime
resetChildExpirationTime()
}

completeWork

根据不同的tag（组件类型）输出各自的处理结果
这里依然是以HostComponent类型处理

completeWork(){
   if(workInProgress.tag===HostComponent) {
      popHostContext()
      getRootHostContainer()
      getHostContext()
      createInstance()
      appendAllChildren()
    finalizeInitialChildren()
   }  
}

createInstance

createInstance(){
//验证DOM嵌套
validateDOMNesting()
//更新父节点信息
updatedAncestorInfo()
//验证DOM嵌套
validateDOMNesting()
// 创建真实Dom
createElement()
// 前置处理
precacheFiberNode()
// 更新Dom对应的Fiber值
updateFiberProps()
}

validateDOMNesting

validateDOMNesting(){
findInvalidAncestorForTag
}

findInvalidAncestorForTag

根据tag查找无效的父节点

findInvalidAncestorForTag(){
}

createElement 创建真实Dom 不是React里面的createElement，不要混淆了，这是ReactDom里面的，创建真实Dom用的

createElement

创建真实Dom

createElement(){
getOwnerDocumentFromRootContainer()
isCustomComponent
}

finalizeInitialChildren --

finalizeInitialChildren

finalizeInitialChildren(){
setInitialProperties()
shouldAutoFocusHostComponent()
}

setInitialProperties

setInitialProperties(){
//验证开发中的属性
validatePropertiesInDevelopment()
assertValidProps()
setInitialDOMProperties()
// 设置text的内容
setTextContent()

}

validatePropertiesInDevelopment

validatePropertiesInDevelopment(){
}

completeRoot 完成渲染-- 脱节较多---这个是在performWorkOnRoot方法中调用的，请command+c 搜索查看

completeRoot

完成Fiber树的创建 ，此时commitRoot时候只传了两个参数，一个是root（RootFiber）一个是finishedWork（Fiber树）

completeRoot() {
   commitRoot(root, finishedWork);
}

commitRoot

commitRoot(){
// 开始提交计时器
startCommitTimer()
//标记承诺的优先级级别
markCommittedPriorityLevels()
prepareForCommit()
//开始提交快照效果定时器
startCommitSnapshotEffectsTimer()
//调用回调
invokeGuardedCallback()
}

markCommittedPriorityLevels

markCommittedPriorityLevels(){
//找到下一个工作期限
findNextExpirationTimeToWorkOn()
}

prepareForCommit

prepareForCommit(){
getSelectionInformation()
}

getSelectionInformation

getSelectionInformation(){
getActiveElementDeep()
}

getActiveElementDeep

getActiveElementDeep(){
getActiveElement()
}

getActiveElement 获取body

getActiveElement(){
}
上一篇下一篇

猜你喜欢

热点阅读