前言
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来说并没有太大的影响。