前言

React 18 引入了一個(gè)關(guān)鍵的新概念，稱(chēng)為“Concurrent”。

并發(fā)涉及同時(shí)執(zhí)行多個(gè)狀態(tài)更新，這可以說(shuō)是 React 18 中最重要的特性。除了并發(fā)之外，React 18 還引入了兩個(gè)新的鉤子，稱(chēng)為 useTransition() 和 useDeferredValue() 鉤子。

它們都有助于降低狀態(tài)更新的優(yōu)先級(jí)，但問(wèn)題是，何時(shí)應(yīng)該使用它們？

什么是Concurrent React？

根據(jù)官方 React18 Docs，并發(fā) React 是:

一種新的幕后機(jī)制，使 React 能夠同時(shí)準(zhǔn)備多個(gè)版本的 UI。您可以將并發(fā)視為一個(gè)實(shí)現(xiàn)細(xì)節(jié)——它的價(jià)值在于它的特性。

并發(fā)可以定義為同時(shí)執(zhí)行大量任務(wù)的能力。并發(fā)并不是一個(gè)特性。相反，它是一個(gè)幕后功能，它允許 React 同時(shí)（并發(fā)地）準(zhǔn)備許多 UI 實(shí)例。 React 以一種對(duì)開(kāi)發(fā)人員隱藏實(shí)現(xiàn)細(xì)節(jié)的方式創(chuàng)建 API。 React 創(chuàng)建者認(rèn)為，React 開(kāi)發(fā)人員應(yīng)該專(zhuān)注于 React 功能將如何幫助他們實(shí)現(xiàn)他們希望為客戶(hù)提供的用戶(hù)體驗(yàn)，并且 React 將弄清楚如何提供這種體驗(yàn)。

Concurrent React 不僅僅是一個(gè)實(shí)現(xiàn)細(xì)節(jié)。相反，它是更新框架核心渲染架構(gòu)的重大升級(jí)。因此，了解它在 React 18 中是如何工作的至關(guān)重要。

設(shè)置項(xiàng)目

對(duì)于本文，我創(chuàng)建了一個(gè) Github 存儲(chǔ)庫(kù)，在其中我構(gòu)建了一個(gè)簡(jiǎn)單的演示產(chǎn)品應(yīng)用程序，允許用戶(hù)通過(guò)輸入產(chǎn)品編號(hào)來(lái)查看產(chǎn)品。首先，您必須克隆包含所有項(xiàng)目啟動(dòng)文件的 Github 存儲(chǔ)庫(kù)。要克隆 Github 存儲(chǔ)庫(kù)，請(qǐng)轉(zhuǎn)到終端并運(yùn)行以下命令：

git clone https://github.com/geekskai/react18-feature.git

完成克隆過(guò)程后，轉(zhuǎn)到項(xiàng)目文件夾，在代碼編輯器上打開(kāi)它，轉(zhuǎn)到編輯器終端，然后通過(guò)運(yùn)行npm install 或安裝腳本和依賴(lài)項(xiàng) yarn install然后，要啟動(dòng)項(xiàng)目，請(qǐng)執(zhí)行 npm start

應(yīng)用程序啟動(dòng)后，它應(yīng)該如下所示：

實(shí)現(xiàn) useTransition()

當(dāng)您第一次輸入產(chǎn)品編號(hào)以獲取product時(shí)，您會(huì)注意到它幾乎會(huì)立即更新，即使它是一個(gè)包含 10,000 項(xiàng)要瀏覽的超長(zhǎng)列表。

現(xiàn)在，當(dāng)您轉(zhuǎn)到 Chrome 瀏覽器的開(kāi)發(fā)人員工具部分，轉(zhuǎn)到性能選項(xiàng)卡，打開(kāi) CPU 節(jié)流并將 CPU 速度降低 4 倍時(shí)，問(wèn)題就開(kāi)始了。

如果您現(xiàn)在在降低 CPU 速度后嘗試輸入產(chǎn)品編號(hào)，您會(huì)注意到更新變得更慢且卡頓明顯。甚至整個(gè)界面看起來(lái)和感覺(jué)都很遲鈍，尤其是輸入字段，現(xiàn)在在我們輸入和刪除時(shí)感覺(jué)沒(méi)有響應(yīng)。 而這絕對(duì)不是一個(gè)好的用戶(hù)體驗(yàn)。

你看不到我在打字，但界面響應(yīng)很慢，如上所示。甚至在 React18 之前，一個(gè)標(biāo)準(zhǔn)的解決方案不是一次處理 10,000 個(gè)項(xiàng)目或產(chǎn)品（在我們的例子中）。您可以使用分頁(yè)或任何其他技術(shù)，或者在服務(wù)器端而不是客戶(hù)端進(jìn)行過(guò)濾。這些都是您在遇到此類(lèi)問(wèn)題時(shí)可以考慮的所有可能的解決方案。

但是，如果您需要在客戶(hù)端執(zhí)行這種操作，即在您的客戶(hù)端代碼上，那么使用 React18，您現(xiàn)在擁有一些工具，可以通過(guò)延遲一些狀態(tài)更新操作來(lái)為用戶(hù)提供更好的感知性能通過(guò)告訴 React 一些更新操作比其他操作具有更高的優(yōu)先級(jí)。這就是 React 18 引入的并發(fā)以及相關(guān)的鉤子和函數(shù)背后的想法。

useTransition() 告訴 React 一些狀態(tài)更新具有較低的優(yōu)先級(jí)，即每個(gè)其他狀態(tài)更新或 UI 渲染觸發(fā)器具有較高的優(yōu)先級(jí)。當(dāng)我們調(diào)用 useTransition() 時(shí)，我們得到一個(gè)包含兩個(gè)元素的數(shù)組：一個(gè) isPending 布爾值，它指示低優(yōu)先級(jí)狀態(tài)更新是否仍處于掛起狀態(tài)，以及一個(gè) startTransition() 函數(shù)，您可以將狀態(tài)更新包裝起來(lái)告訴 React這是一個(gè)低優(yōu)先級(jí)的更新。

查看如何使用 useTransition() 鉤子。首先，轉(zhuǎn)到 App.js 文件并編輯代碼，如下所示：

function App() {
  const [isPending, startTransition] = useTransition();
  const [filterTerm, setFilterTerm] = useState('');
  
  const filteredProducts = filterProducts(filterTerm);
  
  function updateFilterHandler(event) {
    startTransition(() => {
      setFilterTerm(event.target.value);
    });
  }
 
  return (
    <div id="app">
      <input type="text" onChange={updateFilterHandler} />
      <ProductList products={filteredProducts} />
    </div>
  );
}

因?yàn)?startTransition() 包裝了 setFilterTerm() 狀態(tài)更新函數(shù)，所以 React 給這個(gè)狀態(tài)更新代碼一個(gè)較低的優(yōu)先級(jí)。這可確保輸入字段保持響應(yīng)并立即響應(yīng)演示應(yīng)用程序中的擊鍵。如果未使用 useTransition()，應(yīng)用程序可能會(huì)變得無(wú)響應(yīng)，尤其是在速度較慢的設(shè)備上。當(dāng)您輸入產(chǎn)品編號(hào)時(shí)，您會(huì)看到代碼現(xiàn)在響應(yīng)速度更快且延遲更少，即使 CPU 已減慢 4 倍。您可以在您的系統(tǒng)上嘗試此操作并查看結(jié)果。

但是，您不應(yīng)該開(kāi)始使用 startTransition 來(lái)結(jié)束所有狀態(tài)更新。僅當(dāng)您的用戶(hù)界面較慢時(shí)才使用它，尤其是在舊設(shè)備上，或者在您沒(méi)有其他解決方案可使用的情況下。這是因?yàn)樗加昧祟~外的性能。

isPending 是做什么的？

isPending 告訴您當(dāng)前是否有一些狀態(tài)更新仍處于待處理狀態(tài)（React 尚未執(zhí)行，并且優(yōu)先級(jí)較低。您可以使用 isPending 更新 UI 以在等待主要狀態(tài)時(shí)顯示一些后備內(nèi)容更新完成。

我們可以在 App.ts 文件中的以下代碼中看到這一點(diǎn)：

return (
    <div id="app">
      <input type="text" onChange={updateFilterHandler} />
      {isPending && <p style={{color: 'white'}}>Updating list..</p>}
      <ProductList products={filteredProducts} />
    </div>
  );
}

實(shí)現(xiàn)代碼后，您應(yīng)該能夠在運(yùn)行應(yīng)用程序時(shí)看到如下內(nèi)容：

因此，這也是您在使用 useTransition() 時(shí)可以使用的功能。另外，請(qǐng)注意觀察實(shí)現(xiàn) useTransition() 功能后它的響應(yīng)速度有多快。

到此這篇關(guān)于一文搞懂 React 18 中的 useTransition() 與 useDeferredValue()的文章就介紹到這了,更多相關(guān)React useDeferredValue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論