查看react版本_react@next — 关于 React 版本演进的一些思考

点击上方蓝字关注我们

React从诞生到现在，一直在给我们带来各种各样的惊喜，作为一名React的忠实支持者，每一次的React发版都会及时去了解，这边分享一些自己对React版本演进的思考，以及一些后续发布计划同步。

本文纯属个人观点，欢迎指正讨论。

版本回顾

---

首先，我们看看React从16版本发布以来，各个版本迭代的周期。从图里可以看到，React逐步发布了新的生命周期、Context API、Suspense for Code Splitting及Hooks，这些新的特性及API都在React之前公布的RoadMap中，参考——《React 16.x Roadmap》。

自Hooks版本发布后，经历了6个月才发布v16.9版本，中间很多实验性的API变了又变，而且本来预期要发布的Concurrent Mode及Suspense for Data Fetching都没有出现，这里我开始产生了疑惑。同时官方发布一篇博客——《React v16.9.0 and the Roadmap Update》，宣布Roadmap更新以及实验性功能暂时从主版本内分离，官方说法是——These estimates were too optimistic, and we’ve needed to adjust them，我认为是出于对Concurrent Mode功能的稳定性及性能还有迁移成本的考虑。

v16.9之后，版本迭代恢复了正常，差不多一个月发布一个小版本，但基本都是以Bug Fix为主的发布。并且在19年10月，宣布新增react@next和react@experience发版，以此来让开发者尝试新的特性。至此，所有实验性的特征都被放在了experience版本中，而实验版本中最重要的就是Concurrent Mode。

React ConcurrentMode

刚刚说到ConcurrentMode，相信很多同学都有了解，在React 16发布之初，还引起了不少讨论，可以从知乎帖子——《如何评价React的新功能Time Slice 和Suspense？》窥见一斑。

从React 16版本开始，Fiber架构的引入，将使React具备可中断(Interruptible)、可分片(Time Slice)、优先级渲染(Priority-based Rendering)等全新特性。但是到目前为止，在我们的实际使用及开发过程中，更多的只是感受到了“可中断(Interruptible)”，包括Suspense for Code Splitting、componentDidCatch及Hooks等，并没有将可分片(Time Slice)及优先级渲染(Priority-based Rendering)体现出来。

Time Slice这部分可以很经典的参照下面两个图，相信很多同学都见过。两边的调用栈对比一下，在ConcurrentMode下，可以手动指定任务的优先级，调用栈不再是等一整个调用过程执行完毕才响应别的操作，而是进行时间分片，在每一帧进行一次中断，查询是否有更高优先级的任务要处理

通过这样的方式，将一整个同步任务拆解按帧执行的异步任务，即使在复杂逻辑处理情况下，也不再直接阻塞整个任务队列。配合优先级标记，页面能更快响应一些开发者认为优先级高的事件，例如用户输入交互、动画交互、页面滚动等等。这部分就不深入讲了，可以看看下面的效果图，有兴趣的可以参考代码片段[1]。

react next

我一直很关注ConcurrentMode的发布，但是到现在都没有正式发布，根据目前的情况来看，在16版本中应该不会再出现ConcurrentMode相关的内容了。根据官方透出的消息来看，Concurrent Mode会在17版本中默认开启，同时会提供多种模式，包含传统的Legacy Mode、中间态的Blocking Mode以及全新的Concurrent Mode。具体特性可以参照下图或者点击查看。

期待新版本的发布，不得不说Fiber架构的升级，真的使React拥有了更多的可能性。React这一年来发布的各种API，对于React开发者来说真的太友好了，新的Context让跨组件状态管理变得简单、Suspense+React.lazy让代码拆分变得更简单、Hooks的发布让组件拆分更细粒度······同时各种渐进式的优化，让开发者在编码过程中不用考虑太多细节问题，在简单的开发理念下，构建高可用的应用。

同时我也看到了React对用户体验的重视，随着Concurrent Mode发布，可中断(Interruptible)、可分片(Time Slice)、优先级渲染(Priority-based Rendering)等全新特性，将让开发者更容易构建流畅的交互界面，尤其在动画、复杂渲染情况，用户交互将变得更优秀。

虽然Concurrent Mode下，无可避免会对性能造成一定影响，但是从用户体验的角度看，在牺牲一定性能情况下，保证交互的高可用性，是完全值得的。这种理念我觉得在日常的开发过程中也能作为一种导向，不用一味追求性能，例如添加骨架屏、Loading图等等，都能给用户带来很好的体验。

在用户体验的设计理念驱动下，我相信React会让我们看到更多惊喜。最后，放出我很喜欢的一句话，React官方提供的——Its mission is to help integrate the findings from the Human-Computer Interaction research into real UIs(它的使命是通过整合人机交互的研究成果，让人机交互更接近真实世界)。

References

[1] https://codesandbox.io/s/happy-clarke-0hmqm?spm=ata.13261165.0.0.7b165e7biMdQnq&fontsize=14&hidenavigation=1&theme=dark

写在最后

方凳雅集是由阿里巴巴B系6大BU(1688，ICBU，零售通，AE，企业金融，考拉)共同维护的公众号奥，我们会定期发送优质好文，欢迎扫码关注

求关注

求转发