react Fiber双缓存

react流程

Fiber双缓存：

1.什么是fiber

Fiber是React内部所定义的一种数据结构，它是Fiber树结构的节点单位

Fiber是一个链表数据结构（环状链表）

             Child 指向 当前Fiber的第一个子节点
             Sibling 指向当前Fiber的的下一个兄弟节点
             Return 指向当前 Fiber 节点的 父节点

2.Flber双缓存

1.react根据双缓冲机制维护了两个fiber树，

current Fiber树：用于渲染页面
workinProgress Fiber树：用于在内存构建中，方便在构建完成后直接替换current Fiber树

2.Fiber双缓存

首次渲染时：

render阶段会根据jsx对象生成新的Fiber节点，然后这些Fiber节点会被标记成带有‘Placement’的副作用，说明他们是新增节点，需要被插入到真实节点中，在commitWork阶段就会操作成真实节点，将它们插入到dom树中。

页面触发更新时

render阶段会根据最新的jsx生成的虚拟dom和current Fiber树进行对比，比较之后生成workinProgress Fiber(workinProgress Fiber树的alternate指向Current Fiber树的对应节点，这些Fiber会带有各种副作用，比如‘Deletion’、‘Update’、'Placement’等)这一对比过程就是diff算法

当workinProgress Fiber树构建完成，workInprogress 则成为了curent Fiber渲染到页面上

diff ⽐较的是什么？ ⽐较的是 current fiber 和 vdom，⽐较之后⽣成 workInprogress Fiber

举例

一段代码

通过babel转换

通过react相关库转换成虚拟dom

2 .react-reconciler阶段

1.beginWork阶段

生成相应的fiber树

2.completeWork阶段

生成实例

3.commitWork

相应的节点进行提交，渲染到页面上

点击详细了解