react 并发模式_并发React模式：使用Suspense和useTransition构建更好的UX

react 并发模式

React JS开发团队在几个月前宣布了一些激动人心的更改-React将获得“并发模式”。 本质上，这将允许React同时执行多个UI渲染。 当然，JavaScript是单线程的，真正的并发只是一种错觉，但是新功能将使Web应用程序（以及一旦响应React Native的本机应用程序成为本机应用程序）比现在更加省力，更轻松，并且无需自定义代码从开发人员那里来实现这一目标。

现在，React的实验版本中可以使用并发模式，因此让我们深入研究一下如何使用闪亮的新API。

在这篇文章中，我将向您展示如何通过useTransition挂钩使用Suspense API。 还有另一个钩子useDeferredValue ，它具有稍微不同但同样重要的目的，我将在后续文章中介绍。

但是现有的Suspense功能如何？

您会注意到Suspense API自v16.6起就已经存在。 实际上，这是在React实验版本中扩展为执行更多操作的同一API。 在React 16.6中，Suspense仅可用于一种用途：使用React.lazy()代码拆分和延迟加载组件

新方法-获取时渲染

这已经通过演讲和博客进行了很多讨论，并且已经在官方文档中进行了讨论，因此我将在其简要说明中进行介绍-Concurrent React允许我们实现“获取时渲染”模式，该模式将组件渲染为填充它们所需的数据同时获取。 React会在没有可用数据的情况下尽可能多地渲染，并在数据可用时立即渲染需要获取的数据的组件。 在这段时间内，这些组件被称为“已暂停”。

常用的现有方法是“先获取然后渲染”（先获取后再渲染，然后再渲染组件），然后先“先渲染然后获取”（先渲染后渲染），再渲染组件，然后组件本身获取填充其子代所需的数据。 这两种方法都较慢，并且具有许多需要解决方法的缺点。

设置

为此，我使用了一个基本的React应用程序，该应用程序是我通过Webpack和Babel手动配置的（ 单击此处可查看我编写的操作指南 ），唯一的区别是正在运行：

npm i react@experimental react-dom@experimental --save

要获得实验版本，而不是安装react和react-dom的发行版本。

这也应该与用create-react-app React应用程序一起工作，方法是将react和react-dom替换为其实验