什么是Fiber架构
- Fiber架构是VDOM在React中的实现，也是新架构的基础。
React中有三种节点类型
- React Elemet(React元素)，即createElement方法的返回值；
- React Component(React元素)，开发者可以在React中定义函数、类两种类型的Component;
- FilberNode，组成Fiber架构的节点类型。
// App 是React Compent
const App = () => {
return <h1>hello</h1>;
}
// ele 是React Element
const ele = <App/>;
// 在React运行时内部，包含App对应FiberNode
ReactDOM.createRoot(rootNode).render(ele);
FiberNode的含义
- 作为架构，v15的Reconciler采用递归的方式执行，被称为Stack Reconciler。v16及以后版本的Reconciler基于FiberNode实现，被称为Fiber Reconciler。
- 作为“静态的数据结构”，每个FiberNode对应一个React元素，用于保持React元素的类型、对应的DOM元素等信息。
- 作为“动态的工作单位”，每个FiberNode用于保存“本次更新中该元素变化的数据、要执行的工作（增、删、改、更新Ref、副作用等）”。
作为架构，Fiber架构是由说个FiberNode组成的树状结构
- 由于React内部的优化路径，“只有唯一文本节点”的FiberNode不会生成独立的FiberNode.
- FiberNode之间由如下属性连接：
// 指向父FiberNode
this.return = null;
// 指向第一个子FiberNode
this.child = null;
// 指向右边的兄弟FiberNode
this.sibling = null;
双缓存机制
- Fiber架构的工作原理类似于显卡的工作原理。
- 显卡的职责是：合成图像并写入后缓存冲区。一旦后缓存冲区被写入图像，前后缓存冲区就会互换。这种“将数据保持在缓存区再替换”的技术被称为双缓存。
mount时Fiber Tree的构建
-
mount时有两种情况：
- 整个应用的首次渲染，这种情况发生在首次进入页面时；
- 某个组件的首次渲染。
-
mount时FiberTree的构建过程如下：
- 1、创建fiberRootNode;
- 2、创建tag为3的FiberNode，代码HostRoot，后文称该FiberNode为HostRootFiber;
- 3、从HostRootFiber开始，以DFS（Depth-First-Search，深度优先搜索）的顺序生成FiberNode;
- 4、在遍历过程中，为FiberNode标记“代表不同副作用的flags”，以便后续在Renderer中使用。
-
执行ReactDOM.createRoot会创建如图 2-8 所示结构。
-
mount 流程会基于每个 React 元素“以DFS 的顺序”依次生成 wip fiberNode，并连接起来构成 Wip Fiber Tree，如图 2-9 所示
update时Fiber Tree的创建
- 与 mount 流程类似，最终 Renderr 完成工作后，FiberRootNode.current 会再次切换，如图 2-12 所示。
