超越react16

Dan Abramov日前在JSConf Iceland作了相关分享阐述react将来的一些特性和发展方向，主要集中在两方面：Time Slicing(时间切片）和Suspense(悬停)

CPU Demo

一个文本框用于输入，波浪图显示react app的组件渲染状况，时钟显示帧与帧之间的性能，绿色优秀，红色表示卡顿。

从这张图能够看到，随着输入的增多，时钟出现红色，性能也愈来愈差。主要的问题是输入与react组件的更新是同步的，输入文字以后当即更新，性能很是差。

解决的思路就是输入和更新分开，即图中的debounced。这样的性能稍微好一点，可是任然带来两个问题：1. 若是组件的嵌套层次很是深，性能仍然很是差，由于react的更新是同步的。2. 用户体验不太好，由于这是要等全部的输入结束后，才会更新组件。

因此，针对上面的这些状况，Dan带来了异步渲染的机制，react 将来的版本支持异步渲染。

上图表示，即便cpu慢4倍的状况下，异步更新的性能还是很是理想。

CPU Demo表示，react 会根据优先级来判断是否渲染。若是有些高优先级的任务如用户输入，渲染会暂停，把控制权还给浏览器，等浏览器完成输入完成后，再继续后面的工做，这个功能就叫作Time Slicing(时间切片)。

做用以下：

1. React 渲染时不阻塞线程。

2. 若是设备性能良好，感受如同步更新。

3. 若是设备性能较差，更新也是响应式的。（会让位优先级高的内容，空闲时更新）

4. 只有渲染好后的最终状态会展现

5. 一样采用声明式组件方式

IO DEMO

IO demo演示了一个电影列表和详情页的功能。详情页包括了图片，详情和评论。

上图注意movieDetailsFetcher.read这个函数，是将来react提供的获取数据的方式，提供了一个简单的缓存，做用原理以下：

1. 在渲染方法里，从cache取值

2. 若是缓存存在，继续渲染

3. 若是缓存不存在，cache扔出一个promise对象

4. 当promise的状态为resolve,react继续渲染。

5. 缓存会被new context API用到整个react 组件树渲染，也就是全局的数据。

这个异步获取数据的能够用在render（）里面，配合deferState方法，目前render只支持同步数据。若是在render时，发现异步请求，走上面的流程，等待数据返回，才会继续渲染。

所以，配合placeholder,咱们能够采用以下的方式加强用户体验

1. 等详情数据回来再展现

2. 先展现部份内容，剩下的慢慢展现

在此过程当中因为是异步的，由于能够随时点击返回按钮返回列表。

若是图片过大发生抖动，能够等图片返回后，继续promise resolve操做，展现详情。

代码分割

此外，为了提升性能，能够在fetcher里面import 对应模块，作到动态加载JS。

suspence相关总结

1. 在数据准备好前能够暂停任何状态更新,直到数据返回。

2. 对任何组件能够添加异步数据，不会引发堵塞。

3. 网络快，整个组件树ready以后更新。

4. 网络慢，精确控制更新状态（经过placeholder和loading来控制总体或者部分）

5.对不一样的层级提供对应的low-level api和high-level api。

看了分享以后，感受react将来发展方向朝着更好的用户体验方向发展，相关的特性总结以下

1 React会根据用户的设备和网络状态采起不一样的机制

2. 若是设备好，网络快，就能享受丝滑般的感受。

3.若是设备差，网络慢，用户也能获得响应式的反馈

ps: 网易重点部门诚征前端，若是对相关职位感兴趣，请投简历xff1874@gmail.com