React 的将来：Time Slicing 和 Suspense

本文转自 FEPulse 公众号（微信搜索 FEPulse，每日精选一条国内外最新前端资讯，为你把握前端脉搏）。

JSConf Iceland 大会于 3.1 - 3.2 在冰岛举行，在会中，React 核心团队的 Dan Abramov 发表了名为 “Beyond React 16” 的演讲，描述了对 React 将来的展望，本文根据 Dan 的演讲整理。

React 做为一个通用的框架，须要考虑各类网络情况（网速有快有慢）以及各类设备类型（CPU 性能有好有坏），而框架开发者的一个重要使命就是帮助开发者们开发在各类状况下用户体验都很好的应用程序。

影响用户体验的因素主要能够归为两大类：计算能力（Computing Power）和网络速度（Network Speed），他们对应计算设备的 CPU 和 IO 能力。在 React 中，CPU 主要影响 DOM 元素建立和更新的效率，而 IO 则影响获取数据和懒加载的代码。下面 Dan 用了两个 Demo 来展现 React 在这两个方面的尝试。

Demo 1

第一个例子，由一个输入框和下面的三个图表组成，当输入的内容越复杂，下面的图表也愈来愈复杂。

为了更直观地看到页面刷新的效率，Dan 还写了一个时钟，绿色表示页面刷新时帧与帧之间间隔的时间很短，而颜色越深则表示间隔时间越长，页面卡顿感越强，用户体验天然也越差。

这种场景中，提高用户体验的一个经典的作法是 Debounce（Throttle 相似），即等用户暂停输入后再刷新页面，对应的 Demo 以下：

但这么作用户体验上也是有缺陷的，若是用户的 CPU 很强劲，那也不得不等暂停输入后才看到结果。那有没有更好的解决方案呢？有的，Dan 给了一种异步刷新的方案，先看图：

引用 Dan PPT 中的一句话，用来体现这种异步方案的精髓。

We've built a generic way to ensure that high-priority updates like user input don't get blocked by rendering low-priority updates.

Dan 称这种特性为 “Time Slicing”，主要包括如下几点：

Demo 2

第二个 Demo 是一个电影信息展现的应用，选择一个电影，点击进入可查看电影的详情和评论。在后面的演示中，Dan 经过一步步修改这个 Demo 的代码来让咱们理解 React 在网络方面如何提高用户体验的。

首先，Dan 将数据从硬编码改为了从网络获取。代码以下：

在上面这段代码中，当 React 渲染 MovieDetails 组件时，会先看对应电影 ID 的详情有没有被缓存，由于是第一次，电影详情信息还没被缓存，因此须要去网络拉取，下面高能！React 会阻止渲染过程，直到数据被拉取回来！而咱们须要作的，仅仅告诉 React，从电影列表页到电影详情页的过程是个异步过程便可。代码以下：

这样修改事后，下面的动图展现了这种异步过程：点击一个电影，React 去网络拉取对应电影的详情数据，等数据拉取回来后，React 再将页面渲染出来。

同时，页面还保持良好的可交互性，点击一个电影以后紧接着用户也能够点击其余的电影。

上面的修改仅仅模拟了 1s 的网络延迟，若是延迟更长咋办，用户点击了一个电影，发现页面像卡死了通常，用户体验确定不好。Dan 紧接着又对代码作了修改：使用一个叫 “Placeholder” 的组件包裹即将要渲染的异步组件，当组件在加载的过程当中，Placehodler 会显示一个“安慰剂”。

一样的，这个过程界面仍然保持着良好的交互性，当页面在转圈时，用户能够选择返回。

上面的修改中，只有一个电影详情数据须要从网络获取，若是有多个数据须要从网络获取，那么 React 能够选择等全部数据都返回后显示最终的页面，也能够选择优先展现先获取到的数据。

除了在详情页中展现安慰剂，也能够在电影列表处展现，这须要经过一个叫 Loading 的组件来实现，Loading 与 Placehodler 同样，是一个将来的特性。

除此之外，还可使用 Code Splitting 来优化用户体验。但点击一个电影时，再去拉取跟电影详情页相关的代码。这里仍是使用将来提供的 createFetcher 接口来实现 Code Splitting。

运行代码，点击一个电影，会发现 Network 中新拉下来一个叫 “1.chunk.js” 的文件。

最后，Dan 还作了一个用户体验方面的优化，目前为止的 Demo 中，打开页面时，电影海报可能没加载出来（从上面一张动图中也能够看出来），因此 Dan 作了优化，须要等图片加载完成后，页面才能显示。这里的细节再也不详述，固然这也是用 createFetcher 实现的。

到这里，Demo 2 就结束了。Dan 用一句话归纳了这个新特性：

We've built a generic way to suspend rendering while they load asynchronous data.

Dan 称这个新特性为 “Suspense”，主要包括如下几点：

这两项新的特性听说将在今年发布，是否是很期待呢？你对 Timing Slicing 和 Suspense 又有什么见解呢？欢迎留言。

最后，再次邀请你们关注咱们的公众号 FEPulse，第一时间获取咱们精心整理的最新的前端资讯。