React 中的非同步派生

我們遇到了問題，非同步很難。

假設您有一個簡單的 GET API，一個接收 searchText 作為參數的搜尋。您使用您偏好的 http 請求工具來呼叫它並得到一個承諾，它解析為您正在搜尋的任何內容的清單。

如何在 React 元件中呼叫它？

首先，需要注意一件事，我所描述的可以建模為：

result = await searchAPI(searchText);

讓我們在這裡了解一下概念。 這是一個推導。對於每個版本的 searchText，您可以獲得不同的結果。但這裡有一些問題：

• 這是外部資料。
• 它回傳一個承諾。

如何在 React 中稱為派生？

使用第三方函式庫，例如 TanStack Query 和 SWR 解決了我們的問題。它們為我們提供了可以在 React 元件中使用的鉤子，接收我們的狀態和屬性，並在 API 發生變化時重新計算（重新取得）。看這個例子：

const { data: searchResult, loading } = useQuery({queryKey: [search, searchText],queryFn: getSearch,});

好的，我們解決了非同步推導，對吧？

其實不是。

順便說一句，我總是建議只使用其中一個庫，它們很棒，並且可以在更複雜的情況下節省大量時間（例如重新獲取、重試、緩存控制等），但我們不能指望第三個- 解決React 概念問題的聚會。

再次回到反應性，我們需要有一種方法來處理派生模型中的非同步情況。 React 應該為我們提供一個針對這種情況的原語。嗯，直到版本 18 之前我們都沒有它，但在版本 19 中就不同了。

「使用」案例

React 19 引進了一個名為 use 的新原語。是的，命名有點令人困惑，但它在 React 反應模型中的作用非常重要。有了它，我們可以在元件渲染期間解決承諾。 缺失的推導。

在此之前，在元件渲染期間呼叫 fetch 的唯一方法是使用 useEffect，呼叫 Promise 並在 then 子句中，使用回應中的值設定狀態。這在某種程度上是有效的，但我們在使用效果來實現這一點時遇到了所有問題。
use 原語允許我們在元件渲染期間解析 Promise，讓我們可以使用狀態和 props 來建立 Promise，然後解析這些 Promise 並將其用於我們的函數和 JSX。

const useCountTotal = (count: number) => {
  const countTotalPromise = useMemo(() => genericPromise(count), [count]);


  const result = use(countTotalPromise);


  return result;
}


function AsyncDerivation({count}: { count: number}) {
  const result = useCountTotal(count);

  return (
    <div>Total count is: {result}</div>
  )
}

在我寫這篇文章的時候，我們還沒有 React 19 的最終版本。有一些警告，並且該原語可能會在未來發展以在更多地方工作。

原始使用的一個具體問題是它需要與 Suspense 一起使用，這是有充分理由的。

非同步和 React 元件

await 的概念很好，但是與 React 元件結合時有一個缺陷。您不能只在渲染期間使用await。 React 呼叫元件來取得 JSX 回應，並在流程中使用它來渲染 UI。

如果我們可以在等待中停止所有事情，React 就無法存取該元件的子元件並繼續其工作，直到樹的末端。我們會停止渲染流程並使 UI 不更新並凍結。

如何解決？

我們可以看一下我在本文中使用的兩個範例。第一個採用傳回標誌（例如載入）的方法，而不是阻塞渲染流。當承諾得到解決時，它會引發重新渲染，更新標誌，載入變為 false 並且資料接收回應資料。

使用方式不同。它的行為確實類似於await原語，因此元件渲染流在那裡停止，直到解析度。

等等，等等，你說這是一個問題，對吧？

拯救懸念來了。當您使用use 原語時，它將包裝在Suspense 元件中，渲染流將停止等待use 分辨率，並且用戶將獲得在UI 上渲染的後備（通常是加載旋轉器或骨架，表明我們正在那裡加載一些東西）。

當使用承諾解決後，我們將繼續渲染並相應地更新 UI。無需使用useEffect。

結論

use 原語對於旨在使用 Suspense 並處理異步行為的庫作者來說非常有用。對於應用程式開發人員來說，它修復了基本反應性模型中的另一種情況，這非常適合簡單的用例。由於它封裝了 Promise，因此它不僅限於 http 請求，還適用於所有非同步情況和外部 API 使用，這可以為生態系統添加更多資源。

以上是React 中的非同步派生的詳細內容。更多資訊請關注PHP中文網其他相關文章！