【.com速译】本文将向您介绍ReactConcurrencyPatterns背后的思想，以及它的一些用途和好处。React的并发模式是一组旨在改进异步渲染处理的创新功能。这些改进带来了更好的最终用户体验。如何让Web客户端呈现异步更新是业界一直面临的问题。React团队通过向React16.x添加并发模式支持，延续了为框架带来出色解决方案的传统。在许多情况下，状态更改的天真渲染会导致不太理想的行为，例如乏味的加载屏幕、不稳定的输入处理和不必要的旋转。零碎地解决这些问题很容易出错。React的并发模式代表了一个全面的、基于框架的解决方案。核心思想是React在内存中并发绘制更新，支持可中断渲染，并为应用程序代码提供一种与此支持交互的方式。在React中启用并发模式用于利用这些功能的API仍在不断变化，您必须像这样显式安装它：npminstallreact@experimentalreact-dom@experimental并且要求根节点通过并发引擎。这是通过在应用程序的根目录上调用createRoot而不是仅仅调用reactDOM.render()来完成的。如清单1所示。清单1.使用并发渲染器ReactDOM.createRoot(document.getElementById('root')).render();请注意，createRoot仅在安装实验包后可用。而且因为这是一个根本性的变化，现有的代码库和库可能与它不兼容。特别是，以UNSAFE_为前缀的生命周期方法现在不兼容。正因为如此，React在我们今天使用的老式渲染引擎和并发模式之间引入了一个中间步骤。这一步称为“阻塞模式”，它是向后兼容的，但并发特性较少。从长远来看，并发模式将成为默认模式。在中期，React将支持以下三种模式：1.Legacy模式：ReactDOM.render(,rootNode)。现有的遗留模式。2.阻塞模式：ReactDOM.createBlockingRoot(rootNode).render()。更少的变化，更少的功能。3.并发模式：ReactDOM.createRoot(rootNode).render()。完全并发模式，有许多重大变化。React中新的渲染模型并发模式从根本上改变了React渲染界面的方式，允许在获取数据的过程中渲染界面。这意味着React必须了解组件的一些信息。具体来说，React现在必须知道组件数据获取的状态。React的新Suspense组件新的Suspense组件是最突出的功能，您可以通过它通知React您的UI的给定区域依赖于异步数据加载，并为其提供此类加载的状态。此功能在框架级别执行，这意味着您的数据获取库必须通过实现SuspenseAPI来提醒React状态。目前，Relay为GraphQL执行此操作，而react-suspend-fetch项目处理REST数据获取。重申一下，是时候使用更智能的数据获取库了，它能够告诉React其状态是什么，从而允许React优化UI的呈现方式。下面的清单2包含重要的视图模板详细信息。清单2.在视图中使用SuspenseLoadingprofile...}>Loadingposts...}>请注意，此Suspense允许定义替代加载内容。这类似于在数据准备好之前，根据组件在旧渲染引擎中的加载状态，在具有不同返回值的组件中渲染占位符的方式。在此视图模板使用的组件中，您不需要任何特殊代码来处理加载状态。现在，所有这些都由框架和数据提取库在幕后处理。例如，ProfileDetails组件可以加载其数据并返回其标记，如清单3所示。同样，它依赖于实现SuspenseAPI数据存储的资源（清单3中的资源对象）。清单3.ProfileDetails函数ProfileDetails(){constuser=resource.user.read();return

{user.name}

;}数据获取的并发性这种设置的一个重要好处是所有的数据获取都可以并发执行。因此，您的UI既受益于改进的渲染生命周期，也受益于为多个组件实现并行数据获取的简单自动方式。React的useTransition新的并发React工具包中的下一个主要工具是useTransition。这是一个更细粒度的工具，允许您调整UI转换的发生方式。清单4给出了一个使用useTransition包装转换的示例。清单4.useTransitionfunctionApp(){const[resource,setResource]=useState(initialResource);const[startTransition,isPending]=useTransition({timeoutMs:3000});返回(<>{startTransition(()=>{constnextUserId=getNextId(resource.userId);setResource(fetchProfileData(nextUserId));});}}>下一步{isPending?"Loading...":null}>);}清单4中的代码说，“将新状态的显示延迟到三秒。“此代码有效，因为ProfilePage在使用时被Suspense组件包裹。React开始获取数据，而不是显示占位符，它显示定义的timeoutMs的现有内容。获取完成后，React将显示更新的内容content。这是一个改进转换的简单机制。useTransition公开的startTransition函数允许您包装代码的获取部分，而isPending函数公开了一个布尔标志，您可以使用它来处理条件加载显示。所有这些都是可能是因为React的ConcurrentMode实现了后台渲染机制：当发生fetch时，React在后台渲染内存中更新后的状态UI。React的useDeferredValue最后一个例子涉及Fixtypeissuewheretypescauseinconsistentswheretypescauseinconsistentswheredataloaded.这是一个典型的问题，通常通过弹跳/节流输入来解决。并发模式提供了更一致和更流畅的h解决方案：使用DeferredValue。例如。这个解决方案的妙处在于，它可以让您两全其美。输入保持响应，列表会在数据可用时立即更新。清单5.useDeferredValueinactionconst[text,setText]=useState("hello");constdeferredText=useDeferredValue(text,{timeoutMs:5000});//....类似于我们如何用useTransition包装转换，我们用useDeferredValue包装资源值。这允许值在timeoutMs的持续时间内保持不变。管理这种改进的渲染的所有复杂性都由React和数据存储在幕后处理。使用Suspense和Concurrent模式的另一个好处是您可以避免在生命周期和方法中手动加载数据而引入的竞争条件。保证数据到达并按请求的顺序应用。因此，新模式避免了由于请求-响应的交错而需要手动检查数据是否过时。这些是新并发模式的一些亮点。它们提供了令人信服的好处，将成为未来的常态。【翻译稿件，合作网站转载请注明原译者和出处.com】