React Fiber 系列（一）

作者：温荣蛟

Fiber背景

React Fiber是react核心算法的重新实现，跟随react v16大版本发布，解决了上一版复杂节点更新掉帧的现象，同时优化了内部任务的调度逻辑，让任务更加可控。本文将分析fiber的设计背景。

1.旧时代的React
Facebook 在13年开源了react框架，其革命性的设计和友好的开发体验使得它迅速得到一大波开发者的拥护，成为主流开发框架。其特点如下：

声明式设计：开发者只需要面向数据，不需要关心视图层，数据将驱动视图的更新。使创建交互式的UI变得轻而易举。

组件化：构建管理自身状态的封装组件，一个类对应一个组件，组件组合利用可轻易的构成复杂UI。

灵活：无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。

特别提一下其高效特性：

高效：React的高效来源于其首创的Virtual DOM的设计，VDOM建立了浏览器DOM树和js对象树之间的一种映射关系。Javascript直接访问更新DOM结构需要经历诸如创建渲染树，布局，重绘，等流程。而现代的复杂页面往往涉及大量的DOM更新，而每个更新都要经历整个渲染流程，整个程序将变得及其低效。

Virtual DOM 算法会将多次的更新操作首先反应到js对象中，然后统一执行一次DOM的挂载，是一种碎片化整合方案。

这些优秀的设计理念影响者一大批后来者。当前另一大主流前端框架vue也很好的借鉴了React Virtual DOM的设计思想。

2. React的缺陷
但VDOM本质上只是一个对DOM结构的映射，facebook并没有为VDOM开发专用的任务调度模块，这导致早期版本的react缺乏对任务调度的控制。产生的影响在小型应用中不明显，但在大型应用中会格外突出，主要体现在以下两个方面：

2.1掉帧
React在更新dom过程中，如果执行的是一个庞大任务（比如更新一个复杂DOM），JS并不能及时的响应用户的输入响应，当响应延时超过16ms时，给用户的视觉效果就是掉帧。

2.2资源浪费
基于上述更新DOM是一个连续性执行程序的原因，一些正在更新的操作被其他新创建的更新取代，前一次任务已经是无效更新，却不能取消。这势必造成本次更新的延迟和资源的浪费。

调度器最核心的作用在于尽可能地降低响应时间，提高周转效率。而早期VDOM对调度器的缺乏最终使得react丧失了对上诉两个指标的控制。因此表现出了上面两个显而易见的问题。但同时，也势必在某些细微之处带来了更多的影响，例如：周转时间增加导致整体效率降低。

由此，facebook的工程师为react重新设计数据结构和调度机制，称为Fiber。Fiber的核心思想来源于操作系统的的时间片调度算法。类似地，react的调度机制将一个大任务分为多个独立的任务单元，获得对任务的精细控制，从而能有效地实现对响应时间和周转时间的控制。

3. 总结

本文向读者介绍了fiber出现的背景、解决的问题及问题背后的本质——缺乏调度而引发的对响应时间和周转时间的失控。本系列文章将整个Fiber分成三3个大部分，希望最终能够探究出Fiber解决问题的方案：

1. Fiber数据模型解读

本部分将着重分析FiberNode关键属性的含义和目的。算法本源就是数据结构的建模，先从本源出发，了解节点数据结构是我们解读的前置条件。

2. Fiber任务调度

本部分将通过对react调度器进行解读，探索react是如何对任务进行分片，如何实现任务优先级，如何掌控任务的中断、复用、取消。

3. Fiber的工作流程，对整个工作流进行梳理。

本部分将通过一个示例演示fiber的创建与更新流程，摸底react完整的生命周期。

从Virtual DOM的化零为整，再到fiber的化整为零。方式并不是解决问题的根本，无论是VDOM的设计还是Fiber的设计都是数据结构的重新建模。合理的数据结构支撑才是解决问题的核心。解决问题治本的方式是通过结构的合理设计去影响功能，而不是通过对功能的缝补治标。本系列的文章将会践行这个世界观，通过研究底层结构来推动Fiber运作机制的研究，敬请期待。