React推出并发模式：可中断渲染、指定加载顺序、并行处理多状态

React推出并发模式：可中断渲染、指定加载顺序、并行处理多状态

做者｜React 团队译者｜王强编辑｜王文婧警告：本文档介绍的实验功能在稳定版本中尚不可用。不要在生产应用程序中依赖 React 的实验性构建。这些功能可能会发生重大更改，并且直到功能成为 React 的一部分以前这类更改都不会发出警告。本文档面向早期使用者和对此感兴趣的用户。若是你不熟悉 React，那就没必要为这些功能担忧——它们并不是你如今就须要学习的内容。本文档提供了并发模式（Concurrent Mode）的理论概述。若是须要更具体的介绍，能够查阅文末的附录。什么是并发模式？

并发模式是一组新功能，能够帮助 React 应用程序保持响应状态，并适当调整用户的设备功能和网络速度。

这些功能仍处于实验阶段，将来可能会发生更改。它们还不是稳定的 React 版本的一部分，但你能够在实验版本中尝试它们。

阻塞与可中断渲染

为了更好地解释并发模式，咱们用版本控制来打比方。若是你在一个团队中工做，大家可能会使用像 Git 这样的版本控制系统，开发不少分支。当某个分支完成后，你能够将你的工做合并到主干上，这样其余人就能够拉取它了。

版本控制系统还没诞生的时候，开发工做流程是彻底不同的——那时没有分支的概念，若是要编辑某些文件，必须告诉全部人在你完成工做以前不要碰这些文件。你甚至没法与别人同时研究它们——实际上这些文件把你圈住了。

这就是今天包括 React 在内的 UI 库常见的工做机制。一旦它们开始渲染一项更新，或者建立新的 DOM 节点，并在组件内部运行代码等，它们就不会中断这项工做。咱们将这种方法称为“阻止渲染”。

在并发模式下，渲染不会阻塞——它是可中断的，这改善了用户体验。它还能够解锁之前没法实现的一些新功能。这篇文档就是对这一新功能的高层次概述。

可中断渲染

考虑一个可过滤的产品列表。你可能遇到过这种状况，那就是在列表过滤器中输入过滤条件时，每次按键都会出现卡顿。更新产品列表时，某些工做多是不可避免的，例如建立新的 DOM 节点或由浏览器绘制布局等。可是，咱们 什么时候 以及 如何 执行这些任务是问题的关键所在。

解决卡顿的一种常见方法是对输入“消除抖动”。启用防抖功能后，咱们只会在用户中止输入 以后 才更新列表。但咱们敲键盘时，UI 是不会更新的，这很让人泄气。或者咱们能够“限流”输入，并以某个给定的频率上限来更新列表。但在性能较低的设备上咱们仍然会卡顿。防抖和限流都会带来不够理想的用户体验。

卡顿的缘由很简单：渲染开始后就不能中断了，所以浏览器没法在键盘按下后当即更新文本输入。不管 UI 库（例如 React）在基准测试上表现多好，若是它使用阻塞渲染，那么总会有组件中的某些工做形成卡顿，并且一般没有简单的解决方案。

并发模式使渲染可中断，从而从根本上解除了这一限制。这意味着当用户按下一个键时，React 不须要阻止浏览器更新文本输入。相反，它可让浏览器绘制输入的更新，而后继续 在内存中 渲染更新后的列表。渲染完成后，React 将更新 DOM，更改将反映在屏幕上。

从概念上讲，你能够将其视为 React 在“分支”上准备每一个更新的过程。就像你能够放弃分支工做或在分支之间切换同样，“并发模式”下的 React 能够中断正在进行的更新以执行更重要的任务，而后返回到以前的工做。这种技术可能会让你想起视频游戏中的双重缓冲。

并发模式技术减小了 UI 中的防抖和限流的需求。因为渲染是可中断的，所以 React 无需人为地 延迟 工做来避免卡顿。它能够当即开始渲染，但在须要使应用程序保持响应时会中断这项工做。

指定加载顺序

前文提到，并发模式就好像 React 使用“分支”工做同样。分支不只对短时间修复有用，并且对长期运行的功能也有意义。有时你可能会开发某项功能，但可能要花几周的时间才能使其处于“足够好的状态”以合并入主干。和版本控制类似，渲染也是一个道理。

想象一下，咱们正在一个应用程序的两个页面之间跳转。有时，咱们可能没加载足够的代码和数据来在新页面上向用户显示“足够好”的加载状态。跳转到空白页或显示一个巨大的处理中的图标是很是糟心的体验。可是，获取必要的代码和数据每每也不会花费太长时间。若是 React 能够在旧页面上停留更长的时间，并在显示新页面以前“跳过”“不良加载状态”，效果不就会更好了吗？

尽管如今这是能够作到的，但具体执行起来很麻烦。在并发模式下，这一功能是内置的。React 首先开始在内存中准备新页面，或者正如咱们比喻的状况，“在另外一个分支上”作准备。所以 React 能够在更新 DOM 以前等待加载更多内容。在并发模式下，咱们能够告诉 React 继续显示可彻底互动的旧页面，并在页面上嵌入加载指示器。当新页面准备就绪时，React 就能够带咱们跳转过去。

并 发回顾一下上面的两个例子，看看并发模式如何将它们结合起来。在并发模式下， React 能够并行处理多个状态更新——就像不一样的团队成员使用分支独立工做同样：

• 对于受 CPU 影响的更新（例如建立 DOM 节点和运行组件代码），并发意味着更紧急的更新能够“中断”已经开始的渲染。

• 对于受 IO 影响的更新（例如从网络中获取代码或数据），并发意味着 React 甚至能够在全部数据到达以前就开始在内存中渲染，无需显示使人讨厌的加载中状态。

重点在于，你使用React 的方式没有变化。组件、props 和状态之类的概念本质上没有改变。要更新屏幕时，你就会设置状态。

React 使用启发式方法来决定更新的“紧急程度”，并容许你使用少许几行代码来调整，以便在每次交互时都得到所需的用户体验。

将研究成果投入生产

这些并发模式功能有一个共同的目标。它的任务是帮助将人机交互研究的成果整合到现实的用户界面中。

例如，研究代表，在页面之间切换时显示过多的中间加载状态会 拖慢 切换速度，因此并发模式会使用固定的“时间表”显示新的加载状态，以免卡顿和过于频繁的更新。

一样，从研究中咱们知道，悬停和文本输入之类的交互须要在很短的时间内处理完毕，而单击和页面跳转在让用户感到卡顿以前能够等待更长的时间。并发模式在内部使用的不一样“优先级”大体对应于人类感知研究中的交互类别。

专一于用户体验的团队有时会经过一次性解决方案来处理相似的问题。但这些解决方案很难维护，所以很难长久。并发模式的目标是将 UI 研究的成果归入抽象自己，并提供符合习惯的方式来使用它们。做为一个 UI 库，React 能够很好地作到这一点。

下一步

如今你知道了什么是并发模式！

下面的这些文档提供了有关特定主题的更多详细信息：

• 为数据获取挂起——描述了一种在 React 组件中获取数据的新机制。https://reactjs.org/docs/concurrent-mode-suspense.html
• 并发用户界面模式——展现了一些基于并发模式和挂起模式的用户界面模式。https://reactjs.org/docs/concurrent-mode-patterns.html
• 采用并发模式——说明了如何在项目中尝试并发模式。https://reactjs.org/docs/concurrent-mode-adoption.html
• 并发模式 API 参考——实验版本中可用的新 API 文档。https://reactjs.org/docs/concurrent-mode-reference.html

原文连接：https://reactjs.org/docs/concurrent-mode-intro.html

 活动推荐

近年来，随着 jQuery 的落幕，三大框架的割据以及小程序的爆发，大前端的发展也经历了从静态页面到 JavaScript 跨时代的诞生，再从 PC 端到移动端的转向，以及由依赖后端到先后端分离的架构演变。

腾讯在线教育前端团队，近年来在大前端技术架构演进方面也有了很多突破，如 Hybird 方案、离线包方案、PWA 结合 *** 方案、以及 RN 动态化方案的落地和执行等。

此次 GMTC 全球大前端技术大会（深圳站）2019，咱们专门请到了 腾讯的前端高级工程师曹海歌，但愿能够从腾讯在线教育前端团队的实操案例中，深刻了解腾讯为提高研发效率，进行的前端工程化体系建设过程。扫描下方二维码或点击阅读原文，查看详情。