react.js 前端 前端框架 「React 深入」知悉Fiber，方能百战不殆～

}

Fiber

Fiber：这部分内容存储的是关于fiber链表相关的内容和相关的props、state

export type Fiber = {...return: Fiber | null, // 指向父节点的fiberchild: Fiber | null, // 指向第一个子节点的fibersibling: Fiber | null, // 指向下一个兄弟节点的fiberindex: number, // 索引，是父节点fiber下的子节点fiber中的下表ref:| null| (((handle: mixed) => void) & {_stringRef: ?string, ...})| RefObject,// ref的指向，可能为null、函数或对象pendingProps: any,// 本次渲染所需的propsmemoizedProps: any,// 上次渲染所需的propsupdateQueue: mixed,// 类组件的更新队列（setState），用于状态更新、DOM更新memoizedState: any, // 类组件保存上次渲染后的state，函数组件保存的hooks信息dependencies: Dependencies | null,// contexts、events（事件源） 等依赖mode: TypeOfMode, // 类型为number，用于描述fiber的模式 ...

}

Effect

Effect：副作用相关的内容

export type Fiber = {... flags: Flags, // 用于记录fiber的状态（删除、新增、替换等） subtreeFlags: Flags, // 当前子节点的副作用状态 deletions: Array | null, // 删除的子节点的fiber nextEffect: Fiber | null, // 指向下一个副作用的fiber firstEffect: Fiber | null, // 指向第一个副作用的fiber lastEffect: Fiber | null, // 指向最后一个副作用的fiber...

}

Priority

Priority: 优先级相关的内容

export type Fiber = {...lanes: Lanes, // 优先级，用于调度childLanes: Lanes,alternate: Fiber | null,actualDuration?: number,actualStartTime?: number,selfBaseDuration?: number,treeBaseDuration?: number,...

}

链表之间如何连接的？

在 Fiber中我们看到有return、child、sibling这三个参数，分别指向父级、子级、兄弟，也就是说每个element通过这三个属性进行连接

举个栗子：

const Index:React.FC = (props)=> {return (

}

那么按照之前讲的就会转化为：

Fiber 执行阶段

初始化（mount）阶段

在上文已经说过，react首次执行（初始化阶段）会以ReactDOM.render为入口，然后开始执行，由于调用的函数实在过多，这里我就简化一些，方便我们更好理解

createFiber

createFiber：这个函数会创建rootFiber，也就是react应用的根，会调用FiberNode函数来进行对应的构建工作

位置：packages/react-reconciler/src/ReactFiberRoot.old.js

const createFiber = function( tag: WorkTag,pendingProps: mixed,key: null | string,mode: TypeOfMode, ): Fiber {// $FlowFixMe: the shapes are exact here but Flow doesn't like constructorsreturn new FiberNode(tag, pendingProps, key, mode);

};

而FiberNode就是上述讲的构造函数

createFiberRoot

createFiberRoot：它会调用FiberRootNode构造函数，创建fiberRoot，并且指向真正的根节点（root）

位置：packages/react-reconciler/src/ReactFiberRoot.old.js

export function createFiberRoot(containerInfo: any,tag: RootTag,hydrate: boolean,hydrationCallbacks: null | SuspenseHydrationCallbacks,

): FiberRoot {const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);if (enableSuspenseCallback) {root.hydrationCallbacks = hydrationCallbacks;}const uninitializedFiber = createHostRootFiber(tag);root.current = uninitializedFiber; // 指向rootFiberuninitializedFiber.stateNode = root; // 指向fiberRootinitializeUpdateQueue(uninitializedFiber);return root;

}

顺便看下FiberRootNode函数

beginWork

beginWork：这个函数正真走我们的jsx代码，也就是上面讲解的链表之间如何连接的部分

那么我们再把上面的图，拿出来，看看遍历的流程：

首先，我们要知道react对fiber结构的创建和更新都是深度优先遍历

1.首先会判断当前组件是类组件还是函数式组件，类组件tag为1，函数式为0 2.然后发现div标签，标记tag 为 5 3.发现div下包含三个部分，分别是，文本：大家好，我是小杜杜、div标签、p标签 4.首先遍历文本：大家好，我是小杜杜，下面无节点，标记tag 为 6 5.在遍历div标签，标记tag 为 5，此时下面有节点，所以对节点进行遍历，也就是文本走进fiber的世界，标记tag 为 6 6.同理最后遍历p标签

整个的流程就是这样，通过tag标记属于哪种类型，然后通过return、child、sibling这三个参数来判断节点的位置

更新（Update）阶段

接下来看看更新阶段，举个例子：

const Index:React.FC = (props)=> {const [count, setCount] = useState(0)return (

}

当我们点击按钮后，会走createWorkInProgress方法，这个方法会将创建一个新的workInProgress fiber，然后还是会深度优先遍历，对发生改变的fiber打上不同的flags副作用标签，然后通过副作用(Effect)中的nextEffect、firstEffect、lastEffect等字短行程一个Effect List的链表

再来看对应的源码（位置在packages/react-reconciler/src/ReactFiber.old.js）：

export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {let workInProgress = current.alternate; //以alternate作为基础if (workInProgress === null) { //这里判断是初始化还是更新阶段workInProgress = createFiber(current.tag,pendingProps,current.key,current.mode,);workInProgress.elementType = current.elementType;workInProgress.type = current.type;workInProgress.stateNode = current.stateNode;...// 这部分是重置所有的副作用workInProgress.flags = current.flags & StaticMask;workInProgress.childLanes = current.childLanes;workInProgress.lanes = current.lanes;workInProgress.child = current.child;workInProgress.memoizedProps = current.memoizedProps;workInProgress.memoizedState = current.memoizedState;workInProgress.updateQueue = current.updateQueue; // 对依赖的克隆 const currentDependencies = current.dependencies; workInProgress.dependencies =currentDependencies === null? null: {lanes: currentDependencies.lanes,firstContext: currentDependencies.firstContext,}; workInProgress.sibling = current.sibling; workInProgress.index = current.index; workInProgress.ref = current.ref;

... return workInProgress;

}

总的来说在更新阶段，更新阶段会将current的alternate作为基础，然后复制一部分，进行节点的更新，返回一个新的workInProgress

这里需要注意一点，current fiber和workInProgress fiber中的alternate是相互指向的，当新的 workInProgress fiber 创建完成后，fiberRoot的current字段会从current fiber中的rootFiber变为workInProgress fiber中的rootFiber

fiber 带来后的变化

最后，我们再来看看更改前后的fiber图，发生了怎样的变化：

Stack Example

Fiber Example

可以看出来,fiber明显比stack要流畅很多，代表响应速度变快，宽度的变化也不会引发卡顿

对比Vue

我们经过上面的了解，已经知道React Fiber实际上是无差别刷新，他是将整个变化的树作为更改，而Vue是精确的将变化的节点进行替换，那是不是说Vue要强于React？

其实这个话题非常有争议，就我个人而言，Vue的精确的替换也是具有代价的，至于两者孰强孰弱，作为一个小白也不好去多做评论，我们主要是学习思想，毕竟思想才是最重要的

React自身也会提供一些优化的方法，如useMemo、useCallback等，我们一定要善用于这些API，帮助我们更好的去玩React

结语

React Fiber可以说是React的基石，很多方面都离不开它，学习fiber是不可缺少的一部分

实际上，这篇文章笔者已经推翻过两三次，主要原因是fiber实际上非常大，里面涉及的概念也十分琐碎，加上关于fiber的文章也非常多，我不知道该如何更好的去呈现出来

其次，这篇文章算是个入门级的fiber，fiber比较难的概念都没有涉及到，阅读起来相对轻松一点，比较难的是优先级、调度、调和等模块

相比于更高级的模块，应该把架子搭起来，由浅入深，一点一点的慢慢啃，（如有不对的地方请在评论区留言指出～）

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

文章链接

 您阅读本篇文章共花了：