大家好！

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

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

使用

---

為什么要自己制作鉤子？

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

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

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

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

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

簡(jiǎn)而言之，滾動(dòng)我自己的鉤子是一個(gè)機(jī)會(huì)精確磨練我需要的功能（并跳過我不需要的功能），同時(shí)保持庫(kù)小且易于理解。

涵蓋的功能

React 鉤子管理：

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

代碼如何運(yùn)作

以下是 api-refetch 中的要點(diǎn)以及對(duì) useAsync.tsx 中代碼相關(guān)部分的簡(jiǎ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;
  };

• 說明：在這里，我們將任何正在進(jìn)行的提取存儲(chǔ)在pendingPromises 映射中。當(dāng)兩個(gè)組件嘗試同時(shí)獲取相同的資源（通過具有相同的 keyWithArgs）時(shí)，第二個(gè)組件只會(huì)重用正在進(jìn)行的請(qǐng)求，而不是進(jìn)行重復(fù)的網(wǎng)絡(luò)調(diào)用。

---

2. 重新驗(yàn)證

• 代碼片段：

  // 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 */
    ]
  );

• 說明：每當(dāng)您啟用重新驗(yàn)證時(shí)，api-refetch 都會(huì)檢查緩存的數(shù)據(jù)是否早于指定的 revalidateTime。如果是，數(shù)據(jù)會(huì)在后臺(tái)自動(dòng)重新獲取，以使您的 UI 保持同步，無需額外的手動(dòng)觸發(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ā)生錯(cuò)誤時(shí)，掛鉤會(huì)計(jì)算已發(fā)生的失敗嘗試次數(shù)。如果它仍然低于 retryLimit，它會(huì)自動(dòng)等待 retryTime 毫秒，然后再重試。此過程將持續(xù)進(jìn)行，直到成功獲取數(shù)據(jù)或達(dá)到重試限制。

---

4. 自動(dòng)獲取

• 代碼片段：

  // 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 設(shè)置為 true 時(shí)，鉤子將在組件安裝后立即自動(dòng)運(yùn)行異步函數(shù)，非常適合您始終希望加載數(shù)據(jù)的“即發(fā)即忘”場(chǎng)景。

---

查看 GitHub 上的完整源代碼

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

• 完整源代碼

如果您有興趣，請(qǐng)隨意嘗試、報(bào)告問題或做出貢獻(xiàn)。非常感謝任何反饋！

使用示例

安裝

復(fù)制代碼或編碼（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 */
    ]
  );

---

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

GitHub： api-refetch

編碼愉快！

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