译文摘自：Kent C. Dodds 博客

前言

Photo by Marc Schulte

并发模式对用户体验和开发人员体验而言是一个巨大的改进。启用方法如下。

React的新并发模式刚刚在 实验发行版中发布。这是多年研究的结果，并证明了这一点。如果您想了解更多有关为何如此酷的知识，请一定要观看 Dan Abramov在JSIceland的演讲。人们开始使用它，看到一些不错的性能优势。

所有这些，请记住，这是实验性的。实验性发布渠道不尊重semver（因此，依赖它的代码可能会意外中断），并且肯定存在错误。但是早期的实验对许多人来说都是有希望的，我建议您在自己的应用中尝试一下。

一、安装它

首先，要启用并发模式，您需要具有支持此功能的React版本。在撰写本文时，React和React DOM的版本 16.11.0不支持并发模式。因此，我们需要安装该 experimental版本：

npm install react@experimental react-dom@experimental
# or: yarn add react@experimental react-dom@experimental

二、确保运行

确保您的应用正常运行，而无需进行其他任何更改。

运行您的应用程序，运行构建，运行测试/类型检查。如果 控制台中没有以前没有的新错误，则可能是React中的错误，您应该尝试进行最小程度的复制（最好在codeandbox中），然后 在React repo上打开一个新问题。

通常，我们会跳过这一步，但是我认为重要的是要确保如果有问题，您知道这些问题是从哪一步开始的！好的建议，我一般会说

三、启用并发模式

在项目的入口文件中，您可能会有类似以下内容的内容：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
const rootEl = document.getElementById('root')
ReactDOM.render(, rootEl)

要启用并发模式，您将使用新的 createRoot API：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
const rootEl = document.getElementById('root')
// ReactDOM.render(, rootEl)
const root = ReactDOM.createRoot(rootEl)
root.render()

而已。

四、无需更改

确保您的应用正常运行，而无需进行其他任何更改。

运行您的应用程序，运行构建，运行测试/类型检查。如果 控制台中没有以前没有的新错误，则可能是React中的错误，您应该尝试进行最小程度的复制（最好在codeandbox中），然后 在React repo上打开一个新问题。
如果看起来很熟悉，那是因为我从步骤2中复制/粘贴了它
但是，在这种情况下，如果发生故障或控制台中出现新错误。可能是因为您的应用中有一些代码正在使用并发模式下不支持的功能（例如字符串引用，旧版上下文或 findDOMNode）。
另外请注意，所有带有unsafe_前缀的生命周期方法现在实际上都是不安全的，使用它们会导致错误。

五、试用并发模式。

并发模式为我们启用了两个主要功能：

1. 时间分片
2. 悬念一切异步

如果您的应用程序中有一些用户交互很慢，请尝试一下，如果它不那么麻烦，那就是在工作中进行切片（有关更多信息，请参见Dan的演讲链接）。

您可以尝试将您的一种异步交互重构为悬念，或者尝试将其添加到应用程序中的某个位置：

const TRANSITION_CONFIG = { timeoutMs: 3000, //  Play with this number a bit...}function SuspenseDemo() { const [greetingResource, setGreetingResource] = React.useState(null) const [startTransition, isPending] = React.useTransition(TRANSITION_CONFIG) function handleSubmit(event) { event.preventDefault() const name = event.target.elements.nameInput.value startTransition(() => { setGreetingResource(createGreetingResource(name)) }) } return ( 

Suspense Demo Name loading greeting}>
)}function Greeting({greetingResource, isPending}) { return (

{greetingResource ? greetingResource.read() : 'Please submit a name'}

)}// make this function do something else. Like an HTTP request or somethingfunction getGreeting(name) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(`Hello ${name}!`) // try rejecting instead... (make sure to comment out the resolve call) // reject(new Error(`Oh no. Could not load greeting for ${name}`)) }, 1500) // play with this number a bit })}// This should NOT be copy/pasted for production code and is only here// for experimentation purposes. The API for suspense (currently throwing a// promise) is likely to change before suspense is officially released.function createGreetingResource(name) { let status = 'pending' let result let suspender = getGreeting(name).then( greeting => { status = 'success' result = greeting }, error => { status = 'error' result = error }, ) return { read() { if (status === 'pending') throw suspender if (status === 'error') throw result if (status === 'success') return result }, }}class ErrorBoundary extends React.Component { state = {error: null} static getDerivedStateFromError(error) { return {error} } componentDidCatch() { // log the error to the server } tryAgain = () => this.setState({error: null}) render() { return this.state.error ? (
There was an error.

{this.state.error.message}

) : (
this.props.children
)
}
}

在codeandbox上玩这个游戏

我发现的一件事是，悬念API的级别很低，因此需要大量代码才能使其正常运行。但是很酷的事情是，这些是原子特征，可以在抽象中很好地工作并且可以轻松共享。因此，一旦获得了这种抽象，您就可以拥有金色。这很棒。

六、撤消所有更改

重新安装以前安装的最后一个稳定版本，并恢复以前的旧版本 ReactDOM.render。并发模式是实验性的，即使看起来不存在问题，也建议不要将像React这样基础的实验性软件交付。React文档甚至建议，根据应用程序的大小和所使用的第三方库，您可能永远无法交付并发模式（Facebook当前没有计划在旧版Facebook.com上启用并发模式）。

还请记住，作为一个社区，我们才刚刚开始研究这些东西，因此，围绕不同方法进行权衡仍然存在很多未知数。这是一个令人兴奋的时刻。但是，如果您重视稳定性，那么可能会假装并发模式和暂挂片刻不存在。

七、启用严格模式

未通过严格模式的应用程序不太可能在并发模式下正常运行。因此，如果您要努力在应用程序上启用并发模式，请启用严格模式。关于严格模式的一件好事是（与并发模式不同）它可以逐步采用。因此，您可以将严格模式仅应用于代码库中您知道符合标准的部分，然后随着时间的流逝获得完全支持。

结语

我非常期待稳定并发模式和Suspense的稳定发布，以便进行数据提取。当框架和库利用这些新功能时，它将变得更加酷。就像React Hooks对于React生态系统一样棒，我认为Concurrent Mode对开发人员的经验和最终用户都将产生更大的影响。

享受实验吧！

更多React教程及资料，关注我私信回复【教程】即可获取！

想了解更多技术知识欢迎评论区留言或私信我！

欢迎关注公众号：fkdcxy 疯狂的程序员丶 发现更多技术知识！