大家好！

我一直在開發(fā)一個輕量級的 React hook，我稱之為 useAsync，它模仿 React Query 的一些基本功能（如獲取、緩存、重試等），但以更緊湊的方式，易于定制的包。下面是其內(nèi)部工作原理的快速分解，引用了相關(guān)的代碼部分。如果您想查看完整代碼，請前往存儲庫：

GitHub 上的完整源代碼。
該鉤子也可以在 npm 上作為 api-refetch.

使用

---

為什么要自己制作鉤子？

雖然 React Query 和 SWR 都是很棒的庫，但出于以下幾個原因，我想要一種更實用的方法：

1. 輕量化
   
   雖然 React Query 和 SWR 功能豐富，但它們可能相對較大（React Query ~2.2 MB，SWR ~620 kB）。 api-refetch 大約 250 kB，使其非常適合較小的應用程序，其中包大小是一個大問題。該掛鉤意味著作為另一個庫（Intlayer）的依賴項安裝。因此，解決方案的大小是一個重要的考慮因素。

2. 易于定制和優(yōu)化
   我需要一些特定的功能，例如從本地存儲存儲/獲取數(shù)據(jù)和使用簡單的方法管理并行請求。
   通過克隆存儲庫或將代碼直接復制到您的項目中，您可以刪除任何不需要的功能并僅保留您需要的功能。這不僅可以減少捆綁包大小，還可以最大限度地減少不必要的重新渲染和增加，為您提供根據(jù)您的特定要求量身定制的更精簡、性能更高的解決方案。

3. 無所需提供商
   
   我想避免使用 Context Provider 來使鉤子全局化，并使其使用盡可能簡單。所以我根據(jù) Zustand 商店制作了 hooke 的一個版本（參見下面的示例）。

4. 學習練習
   
   從頭開始構(gòu)建異步庫是理解并發(fā)、緩存和狀態(tài)管理內(nèi)部結(jié)構(gòu)的絕佳方法。

簡而言之，滾動我自己的鉤子是一個機會精確磨練我需要的功能（并跳過我不需要的功能），同時保持庫小且易于理解。

涵蓋的功能

React 鉤子管理：

• 獲取和狀態(tài)管理：處理加載、錯誤、成功和獲取狀態(tài)。
• 緩存和存儲：可選擇緩存數(shù)據(jù)（通過底層的 React 狀態(tài)或 Zustand）并提供本地存儲支持。
• 重試和重新驗證：可配置的重試限制和自動重新驗證間隔。
• 激活和失效：根據(jù)其他查詢或狀態(tài)自動激活和失效查詢。示例：用戶登錄時自動獲取一些數(shù)據(jù)，并在用戶注銷時使其失效。
• 并行組件掛載獲取：當多個組件同時掛載時，防止對同一資源同時發(fā)出多個請求。

代碼如何運作

以下是 api-refetch 中的要點以及對 useAsync.tsx 中代碼相關(guān)部分的簡短引用。

1. 并行安裝的獲取和處理

• 代碼片段：

  // This map stores any in-progress Promise to avoid sending parallel requests
  // for the same resource across multiple components.
  const pendingPromises = new Map();

  const fetch: T = async (...args) => {
    // Check if a request with the same key + args is already running
    if (pendingPromises.has(keyWithArgs)) {
      return pendingPromises.get(keyWithArgs);
    }

    // Otherwise, store a new Promise and execute
    const promise = (async () => {
      setQueryState(keyWithArgs, { isLoading: true });

      // ...perform fetch here...
    })();

    // Keep it in the map until it resolves or rejects
    pendingPromises.set(keyWithArgs, promise);
    return await promise;
  };

• 說明：在這里，我們將任何正在進行的提取存儲在pendingPromises 映射中。當兩個組件嘗試同時獲取相同的資源（通過具有相同的 keyWithArgs）時，第二個組件只會重用正在進行的請求，而不是進行重復的網(wǎng)絡調(diào)用。

---

2. 重新驗證

• 代碼片段：

  // Handle periodic revalidation if caching is enabled
  useEffect(
    () => {
      if (!revalidationEnabled || revalidateTime <= 0) return; // Revalidation is disabled
      if (!isEnabled || !enabled) return; // Hook is disabled
      if (isLoading) return; // Fetch is already in progress
      if (!isSuccess || !fetchedDateTime) return; // Should retry either of revalidate
      if (!(cacheEnabled || storeEnabled)) return; // Useless to revalidate if caching is disabled

      const timeout = setTimeout(() => {
        fetch(...storedArgsRef.current);
      }, revalidateTime);

      return () => clearTimeout(timeout);
    },
    [
      /* dependencies */
    ]
  );

• 說明：每當您啟用重新驗證時，api-refetch 都會檢查緩存的數(shù)據(jù)是否早于指定的 revalidateTime。如果是，數(shù)據(jù)會在后臺自動重新獲取，以使您的 UI 保持同步，無需額外的手動觸發(fā)。

---

3. 重試邏輯

• 代碼片段：

  useEffect(
    () => {
      const isRetryEnabled = errorCount > 0 && retryLimit > 0;
      const isRetryLimitReached = errorCount > retryLimit;

      if (!isEnabled || !enabled) return; // Hook is disabled
      if (!isRetryEnabled) return; // Retry is disabled
      if (isRetryLimitReached) return; // Retry limit has been reached
      if (!(cacheEnabled || storeEnabled)) return; // Useless to retry if caching is disabled
      if (isLoading) return; // Fetch is already in progress
      if (isSuccess) return; // Hook has already fetched successfully

      const timeout = setTimeout(() => {
        fetch(...storedArgsRef.current);
      }, retryTime);

      return () => clearTimeout(timeout);
    },
    [
      /* dependencies */
    ]
  );

• 解釋：發(fā)生錯誤時，掛鉤會計算已發(fā)生的失敗嘗試次數(shù)。如果它仍然低于 retryLimit，它會自動等待 retryTime 毫秒，然后再重試。此過程將持續(xù)進行，直到成功獲取數(shù)據(jù)或達到重試限制。

---

4. 自動獲取

• 代碼片段：

  // Auto-fetch data on hook mount if autoFetch is true
  useEffect(
    () => {
      if (!autoFetch) return; // Auto-fetch is disabled
      if (!isEnabled || !enabled) return; // Hook is disabled
      if (isFetched && !isInvalidated) return; // Hook have already fetched or invalidated
      if (isLoading) return; // Fetch is already in progress

      fetch(...storedArgsRef.current);
    },
    [
      /* dependencies */
    ]
  );

• 說明：將 autoFetch 設置為 true 時，鉤子將在組件安裝后立即自動運行異步函數(shù)，非常適合您始終希望加載數(shù)據(jù)的“即發(fā)即忘”場景。

---

查看 GitHub 上的完整源代碼

查看完整代碼，其中包括本地存儲邏輯、查詢失效等：

• 完整源代碼

如果您有興趣，請隨意嘗試、報告問題或做出貢獻。非常感謝任何反饋！

使用示例

安裝

復制代碼或編碼（repo）[https://github.com/aymericzip/api-refetch]

或者

  // This map stores any in-progress Promise to avoid sending parallel requests
  // for the same resource across multiple components.
  const pendingPromises = new Map();

  const fetch: T = async (...args) => {
    // Check if a request with the same key + args is already running
    if (pendingPromises.has(keyWithArgs)) {
      return pendingPromises.get(keyWithArgs);
    }

    // Otherwise, store a new Promise and execute
    const promise = (async () => {
      setQueryState(keyWithArgs, { isLoading: true });

      // ...perform fetch here...
    })();

    // Keep it in the map until it resolves or rejects
    pendingPromises.set(keyWithArgs, promise);
    return await promise;
  };

快速示例

  // Handle periodic revalidation if caching is enabled
  useEffect(
    () => {
      if (!revalidationEnabled || revalidateTime <= 0) return; // Revalidation is disabled
      if (!isEnabled || !enabled) return; // Hook is disabled
      if (isLoading) return; // Fetch is already in progress
      if (!isSuccess || !fetchedDateTime) return; // Should retry either of revalidate
      if (!(cacheEnabled || storeEnabled)) return; // Useless to revalidate if caching is disabled

      const timeout = setTimeout(() => {
        fetch(...storedArgsRef.current);
      }, revalidateTime);

      return () => clearTimeout(timeout);
    },
    [
      /* dependencies */
    ]
  );

---

就是這樣！嘗試一下，然后讓我知道進展如何。 GitHub 上非常歡迎提供反饋、問題或貢獻。

GitHub： api-refetch

編碼愉快！

以上是React 中用于異步數(shù)據(jù)獲取和緩存的輕量級 Hook 展示的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！