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
