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

什么是并发模式？

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

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

阻止和可中断渲染

为了更好的解释并发模式，我们用版本控制作为类比。如果你在一个团队中工作，你可以使用像Git这样的版本控制系统来开发许多分支。当一个分支完成后，你可以把你的工作合并到主干中，这样别人就可以拉它了。

版本控制系统还没有诞生的时候，开发工作流程完全不同。当时还没有分支的概念。如果你想编辑一些文件，你必须告诉每个人在你完成工作之前不要碰它们。你甚至不能和别人同时研究它们。事实上，这些文件附在你身上。

这是当今包括React在内的UI库共同的工作机制。一旦他们开始呈现一个更新，或者创建一个新的DOM节点，并在组件内部运行代码，他们就不会中断这项工作。我们称这种方法为“分块渲染”。

在并发模式下，渲染不会阻塞——，它是可中断的，这改善了用户体验。还可以解锁一些以前无法实现的新功能。本文档是这一新功能的高级概述。

可中断渲染

考虑一系列可过滤产品。你可能遇到过这种情况，就是在列表过滤器中输入过滤条件，每次按键都会卡。在更新产品列表时，有些工作可能是不可避免的，比如创建一个新的DOM节点或者通过浏览器绘制布局。然而，我们何时以及如何执行这些任务是问题的关键。

解决这个问题的一个常见方法是“去抖动”输入。启用防抖时，我们只在用户停止键入后更新列表。但是当我们敲键盘的时候，UI就不会更新了，很让人沮丧。或者我们可以“限制电流”输入，用给定的频率上限更新列表。但是，我们还是会卡在性能较低的设备上。防抖和限流会带来不尽人意的用户体验。

原因很简单：渲染开始后无法中断，所以浏览器无法在按下键盘后立即更新文本输入。不管一个UI库(比如React)在基准上的表现有多好，如果使用分块渲染，那么组件中总会有一些工作会造成堵塞，通常也没有简单的解决方案。

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

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

并发模式技术降低了用户界面中防抖和限流的需求。因为渲染是可中断的，React不需要人为延迟工作来避免干扰。它可以立即开始渲染，但当需要保持应用程序响应时，它会中断工作。

指定装载顺序

如前所述，并发模式类似于使用“分支”工作的React。分支不仅对短期修复有用，对长期运行功能也有意义。有时你可能会开发一个功能，但可能需要几周的时间才能让它处于“足够好的状态”以融入主干。类似于版本控制，渲染也是一个道理。

想象一下，我们在一个应用程序的两个页面之间跳转。有时，我们可能没有加载足够的代码和数据来在新页面上向用户显示“足够好”的加载状态。跳转到一个空白页或在过程中显示一个巨大的图标是一种非常糟糕的体验。然而，通常不需要很长时间就能获得必要的代码和数据。如果React可以在旧页面上停留更长时间，在显示新页面之前“跳过”“糟糕的加载状态”，不是更好吗？

虽然现在可以这么做，但是实施起来很麻烦。在并发模式下，该功能是内置的。反应开始于在内存中准备新的页面，或者用我们的类比来说“在另一个分支上”。因此，React可以在更新DOM之前等待加载更多内容。在并发模式下，我们可以告诉React继续显示可以完全交互的旧页面，并在页面上嵌入加载指示器。新页面准备好了，React可以带我们跳过去。

因…而变得复杂

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

对于受CPU影响的更新(比如创建DOM节点和运行组件代码)，并发意味着更紧急的更新可以“中断”已经开始的渲染。

对于受IO影响的更新(例如，从网络获取代码或数据)，并发意味着React甚至可以在所有数据到达之前就开始在内存中呈现，而不会显示令人讨厌的加载状态。

重点是，你使用React的方式并没有改变。组件、道具和状态等概念本质上没有变化。当您想要更新屏幕时，您将设置状态。

React使用启发式方法确定更新的“紧急程度”，允许你用几行代码来调整，从而在每次交互中获得所需的用户体验。

将研究成果投入生产

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

例如，研究表明，在页面之间切换时显示过多的中间加载状态会降低切换速度，因此并发模式会使用固定的“时间表”来显示新的加载状态，以避免堵塞和频繁更新。

同样，我们从研究中知道，悬停、文本输入等交互需要在短时间内进行处理，而点击、跳页等则可以等待更长时间，用户才会有卡滞感。内部使用并发模式的不同“优先级”大致对应人类感知研究中的交互类别。

专注于用户体验的团队有时会通过一次性解决方案来处理类似的问题。但是这些解决方案很难维护，所以很难长久。并发模型的目标是将用户界面研究的结果整合到抽象本身中，并提供一种习惯的方式来使用它们。作为UI库，React可以很好的做到这一点。

随商信息技术（上海）有限公司 b2b2c多用户商城系统是基于PHP技术的企业级电子商务平台系统，系统支持平台自营、招商加盟和多商家入驻、集成微信商城、移动端APP商城、微信小程序于一体。公司主营业务包含商城系统定制开发、新零售系统解决方案、电商平台系统定制开发、商城网站建设服务等等，随商为大、中、小企业提供一个安全、高效、强大的电子商务解决方案，协助企业快速构建、部署和管理其电子商务平台，拓展企业销售渠道，致力于推动PHP技术和电子商务行业的发展而不断努力。