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来讲并无太大的影响。