React的将来特性

周末参加GDG今年的活动时，听人安利Angular2的宏伟蓝图和规划，忽然好奇React将来规划如何，以前还关注过react-fiber-architecture。而后在YouTube上搜索到了Andrew Clark: What's Next for React — ReactNext 2016，本文便是翻译整理而来。
本文从属于笔者的Web 前端入门与最佳实践的React 入门与最佳实践 系列文章。

React Fiber是对于React核心算法的重写，可能会在将来某个版本中投入使用。不过Andrew Clark一直在提醒由于该特性还处于实验阶段，所以React团队并不能肯定什么时候发布乃至是否能达到预期的目标。在2014年的一篇Twitter中，就有人@React核心团队但愿引入多线程调和等特性。至此以后，React团队成员进行了不少关于列表中列举出的特性的实验与研究。

而React Fiber则是目前最新的实验迭代得出的成果。

Why Fiber:为啥要花大精力复写

Scheduling:调度

调度的概念即在不一样的场景、不一样的上下文中咱们须要为不一样的任务设置不一样的优先级，而React自己做为提供声明式组件支持的框架，使开发者不用再关注于具体的状态转化到UI显示的流程。React为咱们提供了控制如何去更改UI状态以及什么时候更改UI状态的接口，其遵循的是Push方式去更改页面状态，而React Fiber便是但愿寻找更优的算法来决定调度策略。目前来讲，咱们在界面的开发中每每会碰到以下几种须要进行状态更新的状况:

• 用户事件:Clicks,Input Change

• 外部订阅的状态变动:Redux,MobX,Relay

• Animations:Transitions,Gestures

目前的React核心算法中并无对这几种状况进行想起的区分，而是统一对待。而从用户体验的角度来讲，对于状态管理中外部状态变化引起的内部状态变化可能对于用户体验影响不大， 毕竟数据加载自己就存在延迟。而对于动画而言，一旦有所延迟则会引起掉帧，从而大大影响用户体验。

Animations are more important than typical updates

ListView

上文说起，Scheduling容许咱们为不一样的任务定义不一样的执行优先级。这里以某个超长列表为例:

完整的列表包含一千多行数据，如今咱们无论对于屏幕内仍是屏幕外的数据都会进行相同的操做，从而致使了大量的无心义的损耗。所以理想的状况咱们是但愿在用户中止滚动以前不进行其余额外的操做而且不对屏幕以外的列表项进行渲染。从调度的角度来讲，咱们就但愿对屏幕外的列表项设置较低的优先级，而对屏幕内的列表项设置较高的渲染优先级。

How it Works:工做原理

Concurrency

并发性是Fiber的核心精髓，首先须要明了的是并发与并行的区别。React的渲染一直是同步进行的，那么假设当咱们须要去渲染某个动画帧的时候（通常来讲完整的动画须要每秒60帧，大概16.5毫秒每帧），渲染线程忙于渲染一些低优先级的组件，譬如那一些离屏的组件时候，咱们但愿的场景是渲染线程可以暂停当前的动做去渲染动画帧，渲染完毕后继续刚才的工做。其流程概述以下:

• 中断当前低优先级的工做

• 完成高优先级工做

• 继续刚才未完成的工做

此时的一个核心问题就是如何中断现有的渲染工做，目前React的渲染操做能够为抽象为v = f(d)这样一个函数调用，那么问题就被转化为了如何去中断该函数调用。ES6中内置有Generator对象是个不错的考虑，如今也有不少的框架利用Generator去实现Concurrency Primitive。不过Clark在这里介绍的是debugger;表达式，Debugger表达式可以给程序打断点，就像这样:

上图描述的简单的对每一个栈帧打断点的过程就是如今Fiber中断渲染过程而后恢复的机制，其流程概述为:

• 中断当前渲染的调用栈

• 将当前的调用栈暂存

• 执行某些拥有独立调用栈的高优先级的任务

• 返回原始调用栈而且恢复其执行

到这里咱们能够将Fiber定义为Reimplementation Of The Stack，A Fiber is a Virtual Stack Frame。

Fiber

Fiber 更多的是语言中的某个抽象，用于实现某些语言中复杂的特性。在下表中就是将Stack Frame与Fiber中的名词进行了对比:

除了上表列举的Fiber的基本性质，其还具有以下属性:

• 优先级

• 可缓存的输入（Props）

• Key，用于调和时使用

基于Fiber就能够将本来的渲染工做切分到可并发的细小单元，而后按照优先级依次执行。下一步咱们就是须要解决应该在什么时候暂停当前工做以及什么时候恢复原调用栈。目前浏览器为咱们提供了两个用于动画渲染的API:

• requestAnimationFrame(cb):按期调用动画帧，若是你想作逐帧动画的时候，你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动做。一般来讲，被调用的频率是每秒60次，可是通常会遵循W3C标准规定的频率。若是是后台标签页面，重绘频率则会大大下降。

• requestIdleCallback(cb):在浏览器空闲时调用回调函数。

上图就是展现了Fiber的工做流，目前有40个单位的低优先级工做，若是用上面的连续性渲染，咱们并不能在渲染过程当中插入动画帧。而在下面的可中断恢复的方案中，咱们能够将动做拆分为四个块，而后在块之间插入高级别的动画帧。

What it can do:有啥做用

• Integrated Layout

• 在render函数中返回多个元素

• 更加清晰的代码库