2

前言

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

react fiber出现的原因是什么?

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

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

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

1.virtual Dom数据结构改变

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

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

react fiber实现之后,是用一个单链表的形式去渲染的
image.png
如图
渲染的顺序是
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.requestAnimationFramewindow.requestIdleCallback。具体用法可以查MDN

结语

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


aaron_lawliet
178 声望2 粉丝