譯文摘自：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_前綴的生命周期方法現在實際上都是不安全的，使用它們會導致錯誤。

五、試用并發模式。

并發模式為我們啟用了兩個主要功能：

時間分片
懸念一切異步

如果您的應用程序中有一些用戶交互很慢，請嘗試一下，如果它不那么麻煩，那就是在工作中進行切片（有關更多信息，請參見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上啟用并發模式）。

還請記住，作為一個社區，我們才剛剛開始研究這些東西，因此，圍繞不同方法進行權衡仍然存在很多未知數。這是一個令人興奮的時刻。但是，如果您重視穩定性，那么可能會假裝并發模式和暫掛片刻不存在。

七、啟用嚴格模式

未通過嚴格模式的應用程序不太可能在并發模式下正常運行。因此，如果您要努力在應用程序上啟用并發模式，請啟用嚴格模式。關于嚴格模式的一件好事是（與并發模式不同）它可以逐步采用。因此，您可以將嚴格模式僅應用于代碼庫中您知道符合標準的部分，然后隨著時間的流逝獲得完全支持。