React 源码 - Fiber

47 阅读1分钟

采用双缓存结构

首次 mount 阶段

image.png

image.png

image.png

更新阶段 - diff

image.png

image.png


function createWorkInProgress(current, pendingProps) 

// workInProgress是否存在,判断是mount还是update
var workInProgress = current.alternate;


// mount 时创建 Fiber、挂在属性
workInProgress = createFiber(current.tag, pendingProps, current.key, current.mode);
workInProgress.elementType = current.elementType;
workInProgress.type = current.type;
workInProgress.stateNode = current.stateNode;



// 创建 Fiber
new FiberNode(tag, pendingProps, key, mode);