react fiber的实现逻辑

前言

react在16版本实现了react fiber。
那么react fiber到底是什么呢？
官方的一句话解释是“React Fiber是对核心算法的一次重新实现”
对于使用者而言，不需要做什么额外操作来使用它。

react fiber出现的原因是什么？

在复杂的DOM结构中，如果有大量的组件要被渲染，那么会造成页面响应特别慢的情况，比如页面响应延迟几百毫秒，用户就可能感觉到卡顿
另一方面是做一些复杂的动画的时候，动画的卡顿是显而易见的

为了优化react在改变状态时的效率，react官方用fiber的方式重新实现了核心逻辑。具体来说，就是setState的逻辑重写（useState同理）。

具体来说有什么改变呢？听我慢慢道来

1.virtual Dom数据结构改变

在react16以前，虚拟树的存在形式、渲染方式都是树状的。什么是树状的呢？就是从根节点开始，递归嵌套地渲染根节点的子节点。

如图，先渲染第一层的节点，再渲染第二层的第一个节点、第二层第一个节点的子节点……
重要的是，这个过程是一个不可打断的过程，只能等渲染完，才能去做别的事

react fiber实现之后，是用一个单链表的形式去渲染的

如图
渲染的顺序是
a1->b1->b2->c1->d1->d2->b3->c2
顺序并没有改变，但是构成结点之间相互联系的结构改变了。
原来的结构，只是单纯的父节点->子节点的关系
现在，变成了单纯的链式关系
从图中可以看出，a1跟b2并没有直接的关系（除了return，后面会说return），a1只是“通知”b1要进行渲染，由b1“通知”b2进行渲染。
b2及其子节点渲染完之后，再“通知”a1：“我渲染完了”
等b3及其子节点也渲染完之后，a1会变成“渲染完成”的状态，就完成了整棵树的渲染

2.添加了render和commit阶段

fiber的渲染分为两个阶段
第一个阶段是render阶段，确定哪些组件需要更新、如何更新。这个过程可以被打断
第二个阶段是commit阶段，确定怎么更新之后，做DOM的具体渲染更新。这个过程不能被打断，而且是同步渲染。

3.添加“时间分片”

时间分片，通俗地说，就是将任务分成几种类型，具体为：
1.立即需要执行的任务
2.用户无操作期间需要执行的任务
3.正常任务
4.低优先级任务
5.浏览器空闲时才执行的任务
按照优先级执行，如果插入了新的任务，那么也按照优先级重新排序
这个模块是用两个es6的新API实现的，分别是window.requestAnimationFrame和window.requestIdleCallback。具体用法可以查MDN

结语

以上就是fiber的实现逻辑，个人认为其逻辑主要改变的是渲染的数据结构部分。当然其对于我们使用react来说并没有太大的影响。