React18中的useTransition()與useDeferredValue()怎么實現

本文小編為大家詳細介紹“React18中的useTransition()與useDeferredValue()怎么實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“React18中的useTransition()與useDeferredValue()怎么實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

什么是Concurrent React？

根據官方 React18 Docs，并發 React 是:

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

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

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

設置項目

首先，您必須克隆包含所有項目啟動文件的 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() 功能后它的響應速度有多快。

讀到這里，這篇“React18中的useTransition()與useDeferredValue()怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。