一文搞懂 React 18 中的 useTransition() 與 useDeferredValue()

前言

React 18 引入了一個關鍵的新概念，稱為“Concurrent”。

並行涉及同時執行多個狀態更新，這可以說是 React 18 中最重要的特性。除了並行之外，React 18 還引入了兩個新的勾點，稱為 useTransition() 和 useDeferredValue() 勾點。

它們都有助於降低狀態更新的優先順序，但問題是，何時應該使用它們？

什麼是Concurrent React？

根據官方 React18 Docs，並行 React 是:

一種新的幕後機制，使 React 能夠同時準備多個版本的 UI。您可以將並行視為一個實現細節——它的價值在於它的特性。

並行可以定義為同時執行大量任務的能力。並行並不是一個特性。相反，它是一個幕後功能，它允許 React 同時（並行地）準備許多 UI 範例。 React 以一種對開發人員隱藏實現細節的方式建立 API。 React 建立者認為，React 開發人員應該專注於 React 功能將如何幫助他們實現他們希望為客戶提供的使用者體驗，並且 React 將弄清楚如何提供這種體驗。

Concurrent React 不僅僅是一個實現細節。相反，它是更新框架核心渲染架構的重大升級。因此，瞭解它在 React 18 中是如何工作的至關重要。

設定專案

對於本文，我建立了一個 Github 儲存庫，在其中我構建了一個簡單的演示產品應用程式，允許使用者通過輸入產品編號來檢視產品。首先，您必須克隆包含所有專案啟動檔案的 Github 儲存庫。要克隆 Github 儲存庫，請轉到終端並執行以下命令：

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

完成克隆過程後，轉到專案資料夾，在程式碼編輯器上開啟它，轉到編輯器終端，然後通過執行npm install 或安裝指令碼和依賴項 yarn install然後，要啟動專案，請執行 npm start

應用程式啟動後，它應該如下所示：

實現 useTransition()

當您第一次輸入產品編號以獲取product時，您會注意到它幾乎會立即更新，即使它是一個包含 10,000 項要瀏覽的超長列表。

現在，當您轉到 Chrome 瀏覽器的開發人員工具部分，轉到效能索引標籤，開啟 CPU 節流並將 CPU 速度降低 4 倍時，問題就開始了。

如果您現在在降低 CPU 速度後嘗試輸入產品編號，您會注意到更新變得更慢且卡頓明顯。甚至整個介面看起來和感覺都很遲鈍，尤其是輸入欄位，現在在我們輸入和刪除時感覺沒有響應。 而這絕對不是一個好的使用者體驗。

你看不到我在打字，但介面響應很慢，如上所示。甚至在 React18 之前，一個標準的解決方案不是一次處理 10,000 個專案或產品（在我們的例子中）。您可以使用分頁或任何其他技術，或者在伺服器端而不是使用者端進行過濾。這些都是您在遇到此類問題時可以考慮的所有可能的解決方案。

但是，如果您需要在使用者端執行這種操作，即在您的使用者端程式碼上，那麼使用 React18，您現在擁有一些工具，可以通過延遲一些狀態更新操作來為使用者提供更好的感知效能通過告訴 React 一些更新操作比其他操作具有更高的優先順序。這就是 React 18 引入的並行以及相關的勾點和函數背後的想法。

useTransition() 告訴 React 一些狀態更新具有較低的優先順序，即每個其他狀態更新或 UI 渲染觸發器具有較高的優先順序。當我們呼叫 useTransition() 時，我們得到一個包含兩個元素的陣列：一個 isPending 布林值，它指示低優先順序狀態更新是否仍處於掛起狀態，以及一個 startTransition() 函數，您可以將狀態更新包裝起來告訴 React這是一個低優先順序的更新。

檢視如何使用 useTransition() 勾點。首先，轉到 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>
  );
}

因為 startTransition() 包裝了 setFilterTerm() 狀態更新函數，所以 React 給這個狀態更新程式碼一個較低的優先順序。這可確保輸入欄位保持響應並立即響應演示應用程式中的擊鍵。如果未使用 useTransition()，應用程式可能會變得無響應，尤其是在速度較慢的裝置上。當您輸入產品編號時，您會看到程式碼現在響應速度更快且延遲更少，即使 CPU 已減慢 4 倍。您可以在您的系統上嘗試此操作並檢視結果。

但是，您不應該開始使用 startTransition 來結束所有狀態更新。僅當您的使用者介面較慢時才使用它，尤其是在舊裝置上，或者在您沒有其他解決方案可使用的情況下。這是因為它佔用了額外的效能。

isPending 是做什麼的？

isPending 告訴您當前是否有一些狀態更新仍處於待處理狀態（React 尚未執行，並且優先順序較低。您可以使用 isPending 更新 UI 以在等待主要狀態時顯示一些後備內容更新完成。

我們可以在 App.ts 檔案中的以下程式碼中看到這一點：

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

實現程式碼後，您應該能夠在執行應用程式時看到如下內容：

因此，這也是您在使用 useTransition() 時可以使用的功能。另外，請注意觀察實現 useTransition() 功能後它的響應速度有多快。

到此這篇關於一文搞懂 React 18 中的 useTransition() 與 useDeferredValue()的文章就介紹到這了,更多相關React useDeferredValue內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！