譯文摘自：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上啟用併發模式）。
還請記住，作為一個社群，我們才剛剛開始研究這些東西，因此，圍繞不同方法進行權衡仍然存在很多未知數。這是一個令人興奮的時刻。但是，如果您重視穩定性，那麼可能會假裝併發模式和暫掛片刻不存在。
七、啟用嚴格模式
未透過嚴格模式的應用程式不太可能在併發模式下正常執行。因此，如果您要努力在應用程式上啟用併發模式，請啟用嚴格模式。關於嚴格模式的一件好事是（與併發模式不同）它可以逐步採用。因此，您可以將嚴格模式僅應用於程式碼庫中您知道符合標準的部分，然後隨著時間的流逝獲得完全支援。
結語
我非常期待穩定併發模式和Suspense的穩定釋出，以便進行資料提取。當框架和庫利用這些新功能時，它將變得更加酷。就像React Hooks對於React生態系統一樣棒，我認為Concurrent Mode對開發人員的經驗和終端使用者都將產生更大的影響。
享受實驗吧！
更多React教程及資料，關注我私信回覆【教程】即可獲取！
想了解更多技術知識歡迎評論區留言或私信我！
歡迎關注公眾號：fkdcxy 瘋狂的程式設計師丶
發現更多技術知識！
