【51CTO.com快譯】本文將向您介紹React并發(fā)模式背后的思想，以及它的一些用法和優(yōu)點(diǎn)。React的并發(fā)模式是一組創(chuàng)新的特性，旨在改進(jìn)異步呈現(xiàn)的處理。這些改進(jìn)帶來(lái)了更好的終端用戶(hù)體驗(yàn)。

如何讓W(xué)eb客戶(hù)端呈現(xiàn)異步更新是業(yè)內(nèi)一直面臨的問(wèn)題。React團(tuán)隊(duì)通過(guò)向React 16.x中添加并發(fā)模式支持，延續(xù)了將優(yōu)秀解決方案引入框架的傳統(tǒng)。

?[[387331]]?

在很多情況下，對(duì)狀態(tài)變化的幼稚呈現(xiàn)會(huì)導(dǎo)致不太理想的行為，例如乏味的加載屏幕、不穩(wěn)定的輸入處理和不必要的旋轉(zhuǎn)。

零零碎碎地解決這些問(wèn)題是容易出錯(cuò)的。React的并發(fā)模式代表了一種全面的，框架化的解決方案。其核心思想是：React在內(nèi)存中并發(fā)地繪制更新，支持可中斷的渲染，并提供了應(yīng)用程序代碼與這種支持交互的方式。

在React中啟用并發(fā)模式

用于利用這些功能的API仍在不斷變化，你必須明確地安裝它，如下所示：

npm install react @ experimental react - dom @ experimental

并發(fā)模式是對(duì)React工作方式的全局更改，并要求根節(jié)點(diǎn)通過(guò)并發(fā)引擎?zhèn)鬟f。這是通過(guò)在應(yīng)用的根目錄上調(diào)用createRoot來(lái)完成的，而不是僅僅調(diào)用reactDOM.render()。如Listing 1所示。

Listing 1. Using the concurrent renderer

ReactDOM.createRoot(
document.getElementById('root')
).render(<App />);

需要注意的是，createRoot只有在安裝了實(shí)驗(yàn)包之后才可用。而且因?yàn)樗且粋€(gè)根本性的變化，現(xiàn)有的代碼庫(kù)和庫(kù)可能與它不兼容。特別是現(xiàn)在用UNSAFE_作為前綴的生命周期方法是不兼容的。

正因?yàn)槿绱耍琑eact在我們現(xiàn)在使用的老式渲染引擎和并發(fā)模式之間引入了一個(gè)中間步驟。這個(gè)步驟稱(chēng)為“阻塞模式”，它向后兼容，但并發(fā)特性更少。

從長(zhǎng)遠(yuǎn)來(lái)看，并發(fā)模式將成為默認(rèn)模式。在中期，React將支持以下三種模式：

1. 舊版模式：ReactDOM.render(<App />, rootNode)。現(xiàn)有的舊版模式。

2. 封鎖模式：ReactDOM.createBlockingRoot(rootNode).render(<App />)。更少的改變，更少的特性。

3. 并發(fā)模式：ReactDOM.createRoot(rootNode).render(<App />)。完全并發(fā)模式，具有許多重大的更改。

React中的一個(gè)新的渲染模型

并發(fā)模式從根本上改變了React渲染接口的方式，以允許在獲取數(shù)據(jù)的過(guò)程中渲染接口。這意味著React必須知道一些關(guān)于組件的信息。具體來(lái)說(shuō)，React現(xiàn)在必須知道組件的數(shù)據(jù)獲取狀態(tài)。

React的新Suspense組件

新Suspense組件是最突出的功能，您可以使用此組件通知React UI的給定區(qū)域依賴(lài)于異步數(shù)據(jù)加載，并向其提供此類(lèi)加載的狀態(tài)。

這個(gè)功能是在框架級(jí)別上執(zhí)行的，這意味著您的數(shù)據(jù)獲取庫(kù)必須通過(guò)實(shí)現(xiàn)Suspense API來(lái)警告React的狀態(tài)。目前，Relay為GraphQL執(zhí)行此操作，而react- suspend -fetch項(xiàng)目處理REST數(shù)據(jù)的獲取。

重申一下，現(xiàn)在需要使用更智能的數(shù)據(jù)獲取庫(kù)，該庫(kù)能夠告訴React它的狀態(tài)是什么，從而允許React優(yōu)化UI的呈現(xiàn)方式。如下Listing 2包含了重要的視圖模板細(xì)節(jié)。

Listing 2. Using Suspense in the view

<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails />
<Suspense fallback={<h1>Loading posts...</h1>}>
<ProfileTimeline />
</Suspense>
</Suspense>

注意，這 Suspense 允許定義備用加載內(nèi)容。這類(lèi)似于您如何根據(jù)舊渲染引擎中組件的加載狀態(tài)在組件內(nèi)部使用不同的返回值來(lái)渲染占位符，直到數(shù)據(jù)準(zhǔn)備就緒。

在這個(gè)視圖模板使用的組件中，不需要任何特殊代碼即可處理加載狀態(tài)。現(xiàn)在，所有這些都由框架和數(shù)據(jù)提取庫(kù)在后臺(tái)處理。

例如，ProfileDetails組件可以加載它的數(shù)據(jù)并返回它的標(biāo)記，如Listing 3所示。同樣，這取決于resource實(shí)現(xiàn)Suspense API的數(shù)據(jù)存儲(chǔ)(在Listing 3中是resource對(duì)象)。

Listing 3. ProfileDetails

function ProfileDetails() {
const user = resource.user.read();
return <h1>{user.name}</h1>;
}

數(shù)據(jù)獲取中的并發(fā)性

這種設(shè)置的一個(gè)重要好處是，所有的數(shù)據(jù)獲取都可以并發(fā)進(jìn)行。因此，你的UI既受益于改進(jìn)的渲染生命周期，也受益于為多個(gè)組件實(shí)現(xiàn)并行數(shù)據(jù)獲取的簡(jiǎn)單而自動(dòng)的方法。

React的useTransition

新的concurrent React工具包中的下一個(gè)主要工具是useTransition。這是一個(gè)更細(xì)粒度的工具，允許你調(diào)整UI轉(zhuǎn)換的發(fā)生方式。Listing 4給出了一個(gè)使用useTransition包裝轉(zhuǎn)換的示例。

Listing 4. useTransition

function App() {
const [resource, setResource] = useState(initialResource);
const [ startTransition, isPending ] = useTransition({ timeoutMs: 3000 });
return (
<>
<button
onClick={() => {
startTransition(() => {
const nextUserId = getNextId(resource.userId);
setResource(fetchProfileData(nextUserId));
});
}}> Next </button>
{isPending ? " Loading..." : null}
<ProfilePage resource={resource} />
</>
);
}

Listing 4中的代碼表示，“將新?tīng)顟B(tài)的顯示延遲到三秒。”這段代碼之所以能夠工作，是因?yàn)镻rofilePage在使用時(shí)是由Suspense組件包裝的。React開(kāi)始獲取數(shù)據(jù)，并且不顯示占位符，而是將現(xiàn)有內(nèi)容顯示已定義的時(shí)間timeoutMs。提取完成后，React將顯示更新的內(nèi)容。這是一種用于改善過(guò)渡效果的簡(jiǎn)單機(jī)制。

useTransition公開(kāi)的startTransition函數(shù)允許你包裝代碼的獲取部分，而isPending函數(shù)公開(kāi)一個(gè)布爾標(biāo)志，你可以使用它來(lái)處理?xiàng)l件加載顯示。

所有這一切之所以成為可能，是因?yàn)镽eact的并發(fā)模式實(shí)現(xiàn)了一種后臺(tái)呈現(xiàn)機(jī)制：當(dāng)獲取發(fā)生時(shí)，React會(huì)在后臺(tái)的內(nèi)存中呈現(xiàn)更新后的狀態(tài)UI。

React的useDeferredValue

最后一個(gè)例子涉及修復(fù)類(lèi)型導(dǎo)致數(shù)據(jù)加載時(shí)不一致的類(lèi)型問(wèn)題。這是一個(gè)典型的問(wèn)題，通常通過(guò)輸入的反彈/節(jié)流來(lái)解決。并發(fā)模式提供了一個(gè)更一致、更流暢的解決方案：useDeferredValue。

舉個(gè)例子。這個(gè)解決方案的天才之處在于它能讓你兩全其美。輸入保持響應(yīng)狀態(tài)，并且列表在數(shù)據(jù)可用時(shí)立即更新。

Listing 5. useDeferredValue in action

const [text, setText] = useState("hello");
const deferredText = useDeferredValue(text, { timeoutMs: 5000 });
// ....
<MySlowList text={deferredText} />

與我們使用useTransition包裝轉(zhuǎn)換的方式類(lèi)似，我們使用useDeferredValue包裝資源值。這允許值在timeoutMs期間保持不變。管理此改進(jìn)的渲染的所有復(fù)雜性均由React和數(shù)據(jù)存儲(chǔ)在后臺(tái)處理。

使用Suspense和并發(fā)模式的另一個(gè)好處是，避免了在生命周期和方法中手動(dòng)加載數(shù)據(jù)而引入的競(jìng)爭(zhēng)條件。保證數(shù)據(jù)到達(dá)并按照請(qǐng)求的順序應(yīng)用。因此，新模式避免了由于請(qǐng)求響應(yīng)的交錯(cuò)而手工檢查數(shù)據(jù)過(guò)時(shí)性的需要。

這些是新并發(fā)模式的一些亮點(diǎn)。它們提供了令人信服的好處，這將成為未來(lái)的常態(tài)。

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】