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

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

?[[387331]]?

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

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

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

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

npm install react @ experimental react - dom @ experimental

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

Listing 1. Using the concurrent renderer

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

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

正因為如此，React在我們現(xiàn)在使用的老式渲染引擎和并發(fā)模式之間引入了一個中間步驟。這個步驟稱為“阻塞模式”，它向后兼容，但并發(fā)特性更少。

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

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

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

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

React中的一個新的渲染模型

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

React的新Suspense組件

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

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

重申一下，現(xiàn)在需要使用更智能的數(shù)據(jù)獲取庫，該庫能夠告訴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)容。這類似于您如何根據(jù)舊渲染引擎中組件的加載狀態(tài)在組件內(nèi)部使用不同的返回值來渲染占位符，直到數(shù)據(jù)準(zhǔn)備就緒。

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

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

Listing 3. ProfileDetails

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

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

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

React的useTransition

新的concurrent React工具包中的下一個主要工具是useTransition。這是一個更細(xì)粒度的工具，允許你調(diào)整UI轉(zhuǎn)換的發(fā)生方式。Listing 4給出了一個使用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ài)的顯示延遲到三秒。”這段代碼之所以能夠工作，是因為ProfilePage在使用時是由Suspense組件包裝的。React開始獲取數(shù)據(jù)，并且不顯示占位符，而是將現(xiàn)有內(nèi)容顯示已定義的時間timeoutMs。提取完成后，React將顯示更新的內(nèi)容。這是一種用于改善過渡效果的簡單機(jī)制。

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

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

React的useDeferredValue

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

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

Listing 5. useDeferredValue in action

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

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

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

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

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