React Fiber构建completeWork源码解析.docxVIP

第

React?Fiber构建completeWork源码解析

目录引言一.completeUnitOfWork二.completeWorkcreateInstancecreateElementappendAllChildren三.EffectuseEffectresolveDispatchermountEffectImplpushEffect四.rootFiber-Effect

引言

之前我们介绍了beginWork，react使用的是深度优先遍历算法，整个fiber的构建都遵循此算法。

这也意味着，并不是所有节点beginWork完成后，才去进行completeWork。

当beginWork的next为null时，将进去completeWork。

一.completeUnitOfWork

functioncompleteUnitOfWork(unitOfWork){

varcompletedWork=unitOfWork;

do{

//...

next=completeWork(current,completedWork,subtreeRenderLanes);

//...

if(returnFiber!==nullamp;amp;(returnFiber.flagsamp;Incomplete)===NoFlags){

if(returnFiber.firstEffect===null){

returnFiber.firstEffect=completedWork.firstEffect;

if(completedWork.lastEffect!==null){

if(returnFiber.lastEffect!==null){

returnFiber.lastEffect.nextEffect=completedWork.firstEffect;

returnFiber.lastEffect=completedWork.lastEffect;

varflags=completedWork.flags;

if(flagsPerformedWork){

if(returnFiber.lastEffect!==null){

returnFiber.lastEffect.nextEffect=completedWork;

}else{

returnFiber.firstEffect=completedWork;

returnFiber.lastEffect=completedWork;

varsiblingFiber=completedWork.sibling;

if(siblingFiber!==null){

workInProgress=siblingFiber;

return;

completedWork=returnFiber;

workInProgress=completedWork;

}while(completedWork!==null);

//...

根据深度优先算法，当beginWork完成其中某个子树干的最后一个节点时，进入completeUnitOfWork。根据最后的这个节点先完成completeWork，依次往上，直到找到相邻节点。

核心方法分为2部分，其一：completeWork，其二：完成effect挂载，并串联所有节点的effect（包括节点内部的effect）组装成环状链表。

二.completeWork

functioncompleteWork(current,workInProgress,renderLanes){

varnewProps=workInProgress.pendingProps;

switch(workInProgress.tag){

caseIndeterminateComponent:

caseLazyComponent:

caseSimpleMemoComponent:

caseFunctionComponent:

caseForwardRef:

caseFragment:

caseMode:

caseProfiler:

caseContextConsumer:

case