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(){
}
网友评论