并发模式介绍（实验性）

pascalcaron

什么是并发模式？

并发模式是一组新功能，可帮助React应用程序保持响应速度并优雅地调整用户的设备功能和网络速度。

这些功能仍处于试验阶段，可能会发生变化。它们还不是稳定的React版本的一部分，但是您可以在实验版本中尝试它们。

阻塞与可中断渲染

为了解释并发模式，我们将使用版本控制作为隐喻。如果您在团队中工作，则可能使用像Git这样的版本控制系统并在分支机构上工作。准备好分支后，您可以将您的工作合并到master中，以便其他人可以拉它。

在版本控制存在之前，开发工作流程就非常不同。没有分支的概念。如果要编辑某些文件，则必须告诉所有人在完成工作之前不要触摸这些文件。您甚至无法与那个人同时开始研究它们-实际上，您被他们所阻止。

这说明了包括React在内的UI库目前通常如何工作。一旦他们开始呈现更新，包括创建新的DOM节点并在组件内部运行代码，他们就无法中断这项工作。我们将这种方法称为“阻塞渲染”。

在并发模式下，渲染不会阻塞。它是可中断的。这改善了用户体验。它还解锁了以前无法实现的新功能。我们来看一下具体的例子之前接下来的 章节中，我们会做的新功能高度概括。

可中断渲染

考虑一个可过滤的产品列表。您是否曾经输入过列表过滤器，并感到每次按键时都会结结巴巴？更新产品列表的某些工作可能是不可避免的，例如创建新的DOM节点或浏览器执行布局。但是，我们何时以及如何执行该工作起着重要作用。

解决口吃的一种常见方法是“消除抖动”输入。启用反跳功能时，我们只会在用户停止输入后更新列表。但是，令人沮丧的是，在我们键入时UI没有更新。或者，我们可以“限制”输入，并以某个最大频率更新列表。但是，在功率较低的设备上，我们仍然会结结巴巴。反跳和限制都会产生次佳的用户体验。

口吃的原因很简单：一旦开始渲染，就不能中断它。因此，浏览器无法在按键后立即更新文本输入。无论UI库（例如React）在基准上看起来有多好，如果使用阻塞渲染，组件中的某些工作总是会造成停顿。而且，通常没有容易解决的方法。

并发模式通过使渲染可中断来解决此基本限制。这意味着当用户按下另一个键时，React不需要阻止浏览器更新文本输入。相反，它可以让浏览器绘制输入的更新，然后继续在内存中呈现更新后的列表。渲染完成后，React将更新DOM，并且更改将反映在屏幕上。

从概念上讲，您可以将其视为React在“分支”上准备每个更新的过程。就像您可以放弃分支工作或在分支之间切换一样，并发模式下的React可以中断正在进行的更新以执行更重要的事情，然后返回到之前的工作。此技术还可能使您想起视频游戏中的双重缓冲。

并发模式技术减少了在UI中进行反跳和限制的需求。由于渲染是可中断的，因此React无需人为地延迟工作来避免卡顿。它可以立即开始渲染，但在需要使应用程序保持响应时会中断此工作。

故意加载顺序

我们之前已经说过，并发模式就像React在分支上工作一样。分支不仅对短期修复有用，而且对长期运行的功能也有用。有时您可能需要使用某个功能，但是可能要花几周的时间才能使其处于“足够好的状态”以合并到主功能中。版本控制隐喻的这一方面也适用于呈现。

想象一下，我们正在一个应用程序的两个屏幕之间导航。有时，我们可能没有足够的代码和数据加载，无法在新屏幕上向用户显示“足够好”的加载状态。过渡到空白屏幕或大型微调器可能会带来震撼的体验。但是，获取必要的代码和数据也不会花费太长时间，这也是很常见的。如果React可以在旧屏幕上停留更长的时间，并在显示新屏幕之前“跳过”“不良加载状态”，那会更好吗？

尽管今天这是可能的，但很难进行协调。在并发模式下，此功能是内置的。React首先开始在内存中准备新屏幕，或者，正如我们的隐喻所说，“在另一个分支上”。因此React可以在更新DOM之前等待，以便可以加载更多内容。在并发模式下，我们可以告诉React继续显示旧屏幕，并带有嵌入式加载指示器，完全互动。当新屏幕准备就绪时，React可以带我们进入它。

并发

让我们回顾一下上面的两个例子，看看并发模式如何将它们统一起来。在并行模式下，可以作出反应在几个状态更新工作的同时 -就像树枝让不同的团队成员独立工作：

• 对于受CPU约束的更新（例如，创建DOM节点和运行组件代码），并发意味着更紧急的更新可以“中断”已经开始的渲染。
• 对于IO绑定更新（例如从网络中获取代码或数据），并发意味着React甚至可以在所有数据到达之前就开始在内存中渲染，而跳过显示令人讨厌的空加载状态。
  

重要的是，您使用 React 的方式是相同的。组件，道具和状态之类的概念从根本上以相同的方式工作。要更新屏幕时，请设置状态。

React使用试探法来确定更新的“紧急性”，并允许您使用几行代码对其进行调整，以便您可以在每次交互时获得所需的用户体验。

将研究投入生产

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

例如，研究表明，在屏幕之间切换时显示太多的中间加载状态会使切换的速度变慢。这就是为什么并发模式在固定的“时间表”上显示新的加载状态，以免造成震动和过于频繁的更新。

同样，我们从研究中知道，悬停和文本输入之类的交互需要在很短的时间内处理，而单击和页面转换可以等待更长的时间而不会感到迟钝。并发模式在内部使用的不同“优先级”大致对应于人类感知研究中的交互类别。

专注于用户体验的团队有时会通过一次性解决方案来解决类似的问题。但是，这些解决方案很难维护，因此很难长期生存。使用并发模式，我们的目标是将UI研究发现纳入抽象本身，并提供惯用的方式来使用它们。作为一个UI库，React可以很好地做到这一点。

下一步

现在您知道了什么是并发模式！

在下一页上，您将了解有关特定主题的更多详细信息：

• 暂挂数据获取描述了一种在React组件中获取数据的新机制。
• 并发用户界面模式显示了一些由并发模式和暂挂模式实现的用户界面模式。
• 采用并发模式说明了如何在项目中尝试并发模式。
• 并发模式API参考记录了实验版本中可用的新API。