React Fiber构建源码解析.docx

第

React?Fiber构建源码解析

目录引言一.Fiber是什么二.FiberRootfiberRoot生成fiberRoot类三.RootFiberrootFiber生成createHostRootFiberFiberNodeflagslaneinitializeUpdateQueue四.RootupdateContainercreateUpdate

引言

前面的章节，我们在render方法里，简单涉及到了fiber，那么：

fiber究竟是什么？fiber的出现解决了什么问题？为什么fiber之前的版本，没办法解决

下面，我们带着这些问题，来仔细聊聊Fiber

一.Fiber是什么

在fiber出现之前，react的架构体系只有协调器reconciler和渲染器render。

当前有新的update时，react会递归所有的vdom节点，如果dom节点过多，会导致其他事件影响滞后，造成卡顿。即之前的react版本无法中断工作过程，一旦递归开始无法停留下来。

为了解决这一系列问题，react历时多年重构了底层架构，引入了fiber。fiber的出现使得react能够异步可中断工作任务，并且可以在浏览器空闲时，从中断处继续往下工作。当出现多个高优先任务并行时，react引入lane模型取代之前的expireTime机制。

这里提及下vue工作原理，为什么有新的update任务时，vue不需要做全量递归，而react需要？（留个悬念，大家可以先思考下）

fiber本质上是一种数据结构，在react17后，没有vdom概念，一切皆是Fiber，但Fiber!=vdom。

二.FiberRoot

FiberRoot是react启动阶段，要构建的fiber对象。与之容易混淆是rootFiber，下面会具体介绍。

fiberRoot生成

functioncreateFiberRoot(containerInfo,tag,hydrate,hydrationCallbacks){

varroot=newFiberRootNode(containerInfo,tag,hydrate);

//stateNodeisany.

varuninitializedFiber=createHostRootFiber(tag);

root.current=uninitializedFiber;

uninitializedFiber.stateNode=root;

initializeUpdateQueue(uninitializedFiber);

returnroot;

fiberRoot类

functionFiberRootNode(containerInfo,tag,hydrate){

this.tag=tag;

this.containerInfo=containerInfo;

this.pendingChildren=null;

this.current=null;

this.pingCache=null;

this.finishedWork=null;

this.timeoutHandle=noTimeout;

this.context=null;

this.pendingContext=null;

this.hydrate=hydrate;

this.callbackNode=null;

this.callbackPriority=NoLanePriority;

this.eventTimes=createLaneMap(NoLanes);

this.expirationTimes=createLaneMap(NoTimestamp);

this.pendingLanes=NoLanes;

this.suspendedLanes=NoLanes;

this.pingedLanes=NoLanes;

this.expiredLanes=NoLanes;

this.mutableReadLanes=NoLanes;

this.finishedLanes=NoLanes;

this.entangledLanes=NoLanes;

this.entanglements=createLaneMap(NoLanes)