React Fiber

在了解一个知识架构的时候，为了能更彻底的了解这个知识架构，我们通常会围绕着以下几个问题展开来理解。

• 什么是React Fiber
• React Fiber产生的原因（React Fiber解决了什么问题）
• 详细了解React Fiber

1.什么是fiber

首先fiber是操作系统的概念，即纤程。是更轻量级的线程，一个线程可以包含多个纤程。React在这里利用这个特点（注意是特点，意图相同）来命名React Fiber。

2.React Fiber产生的原因

Fiber诞生之前，React运行机制是采用一把梭的方式进行虚拟dom对比以及更新视图，大致过程如下

第一步：首先创建一颗虚拟dom tree

第二步：在状态改变的时候生成一颗新的虚拟dom tree

第三步：两个树进行对比得到更新的节点

第四步：将得到的更新节点对应生成真实dom

这种一把梭的流程弊端就是js执行时间过长导致UI卡顿甚至掉帧。至于为何UI卡顿或者掉帧呢~到这里就需要考虑一些关于浏览器原理问题。

浏览器原理

浏览器是多线程运行，包含JavaScript线程，事件线程，定时任务线程，HTTP请求线程，UI渲染线程等等，但是这里JS线程与UI线程是互斥的，

也就说是这俩只能执行其中一个线程，每当一个线程在执行的时候，另一个线程都会被挂起，原因很简单，JS线程可以操作dom，如果同时执行

会带来很多不可控问题。当JS线程执行时间过长的时候就会导致UI渲染线程一直被挂起，可操作时间就会一直推迟，导致的效果就是页面不响应，

卡顿，甚至掉帧的可能。

React Fiber出来之前，传统模式的React再进行协调（这里我只考虑这个阶段，因为映射真实dom阶段不会有太大的消耗）会有比较大的性能开销，

当然React在这个阶段已经做了这个优化，比如优化虚拟dom tree对比的过程。但在复杂场景仍然会导致这个问题。好了既然说到JS执行时间过长，那么

多少时间算合理呢~

通常设备的帧率是60次/秒，也就是一帧需要控制在16.67ms之内才能保证一个非常理想的交互体验，浏览器的一帧组成如同

从浏览器一帧的结构中可以观察到，渲染之间还有events，javascript，begin frame，rAF要处理，一帧中，需要将JS执行时间控制到一定范围，

才不会影响渲染。所以React Fiber主要的任务就是将传统React协调方式进行优化，从而达到每次运行可以控制在一个合理的范围，达到一个理

想的UI交互，这就是React Fiber要解决的问题。

ps：这里不考虑UI渲染部分的耗时。

３.详细了解React Fiber

 React Fiber

（1）React Fiber 在reconciliation阶段的协调核心算法重新实现

（2）链表结构的Fiber tree，方便在reconciliation阶段做中断以及回溯

（3）可控调用栈

React Fiber重新实现

首先了解一帧的执行过程

在一帧中执行可以通过插入requestIdleCallback来执行定向操作，但是requestIdleCallback调用是在渲染之后，这就导致了，我们不可以在这里

再进行dom操作，再次操作dom会导致重新渲染，导致结果不可控。

来自MDN的解释：

window.requestIdleCallback()方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。（来自：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback）

React内部则是避开了requestIdleCallback采用window.requestAnimationFrame来动态调整帧率，计算JS剩余时间是否超过React设定的阈值16ms，从而实现

时间分片，原因就是requestAnmiationFrame再渲染之前执行，在这里做任何操作都不会影响到渲染的结果。React Fiber 规定一帧内JS执行的最大时间，即阈值16ms

来自MDN的解释：

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()

JS在执行过程，一个工作单元由JS引擎启动，一把梭得形式执行，只要开始就无法中断，直到整个工作单元执行结束。如图

React Fiber得目的是将一个繁重得任务进行拆分，拆分成一个个小的单元来进行执行，（这里就是fiber纤程得概念）按照优先级高低得方式

进行执行这一个个小的单元任务，这就是时间分片得概念。如下图

总结Fiber 大致调度过程

（1）state改变执行一个同步任务，将其拆分成一个任务队列

（2）在任务队列中按照任务优先级执行，如果执行超过了deadline，这状态设置为pending状态挂起

（3）一个fiber任务的执行或者挂起，根据requestIdleRequest/requestAnimationRequest实现的调度器，返一个新的fiber任务队列继续执行。

 任务优先级

sync

InteractiveExpiration 

AsyncExpiration

开发者视角

unstable_scheduleCallback(() => {
  // 异步低优先级任务，AsyncExpiration
  this.setState();
});
flushSync(() => {
  // 同步任务，最高优先级
  this.setState();
});
onClick={() => {
  // 异步高优先级任务，InteractiveExpiration
  this.setState();
}}

Fiber节点

一个fiber结构是一个js对象，对应通过React.createElement来创建一个虚拟dom节点，整个虚拟dom树上得所有节点都对应一个fiber节点，这个fiber节点上

除了包含元素信息意外，还包含了一些其他信息，用来支撑整个调度算法。

fiber节点上重要得信息就是包含了三个“指针”，分别是child，sibling，return，用来遍历整个fiber树。

child指向第一个儿子节点（其余儿子节点都是基于第一个儿子节点通过sibling查找）

sibling指向兄弟节点

return指向父级节点

Fiber 树的结构图

得益于fiber节点指针以及整颗树得链表结构，可以实现任务分片，任务中断，按照优先级调度。

整个fiber树执行过程

render阶段

1创建当前current树

2状态改变生成workInProgress树

3协调生成effecList链表（变更得节点链表）

commit阶段

4将effectList链表映射到真实dom

Update更新过程

（1）记录节点状态

（2）将变更节点放到updateQueue中

（3）统一更新到UI视图层

setState干了什么

setState本质上只是一个改变state得命令，可以理解为是一个视图更新得请求，但是试图更新不是setState干得事儿。当执行了setState得时候

改变了state，得到变更得fiber节点，然后将变更得节点push到了updateQueue中，在React会统一在一个时间点处理整个updateQueue内得节点

我们可以观察到一个很常见得事儿，就是在调用setState方法之后state并没有及时更新。上述就是原因，举个例子

当在一个合成事件内同时执行了多个setState方法，比如针对一个count，多次进行了+1操作，得到得结果state只是1。原因就是，多次执行的时候

第一次执行setState的时候count进行+1的操作，但是state并没有及时改变，再次执行的时候state还是原来的值，这样多次操作其实效果就是一次操作

的效果，只是连续往updateQueue中push了count+1的第一次得到的值。