Präsentation eines leichtgewichtigen Hooks für den asynchronen Datenabruf und das Caching in React

Hallo zusammen!

Ich habe an einem leichten React-Hook gearbeitet, den ich useAsync nannte und der einige der wesentlichen Funktionen von React Query nachahmt (wie Abrufen, Caching, Wiederholungsversuche usw.), aber in einer kompakteren, leicht anpassbares Paket. Nachfolgend finden Sie eine kurze Aufschlüsselung der internen Funktionsweise unter Bezugnahme auf die relevanten Codeabschnitte. Wenn Sie den gesamten Code sehen möchten, gehen Sie zum Repo:

Vollständiger Quellcode auf GitHub.
Der Hook ist auch auf npm als api-refetch verfügbar.

---

Warum meinen eigenen Haken herstellen?

Während React Query und SWR beide großartige Bibliotheken sind, wollte ich aus mehreren Gründen einen praktischeren Ansatz:

1. Leichter Fußabdruck
   
   Obwohl React Query und SWR funktionsreich sind, können sie relativ groß sein (React Query ~2,2 MB, SWR ~620 kB). API-Refetch hat eine Größe von etwa 250 kB und ist somit ideal für kleinere Apps, bei denen die Bundle-Größe eine große Rolle spielt. Dieser Hook sollte als Abhängigkeit einer anderen Bibliothek (Intlayer) installiert werden. Daher war die Größe der Lösung ein wichtiger Gesichtspunkt.

2. Einfach anzupassen und zu optimieren
   Ich brauchte einige spezifische Funktionen – wie Speichern/Abrufen von Daten aus dem lokalen Speicher und Verwaltung paralleler Anfragen mit einem unkomplizierten Ansatz.
   Durch Klonen des Repos oder Kopieren des Codes direkt in Ihr Projekt können Sie alle unerwünschten Funktionen entfernen und nur das behalten, was Sie benötigen. Dies reduziert nicht nur die Bündelgröße, sondern minimiert auch unnötige Neu-Renderings und -Vergrößerungen, sodass Sie eine schlankere, leistungsfähigere Lösung erhalten, die auf Ihre spezifischen Anforderungen zugeschnitten ist.

3. Kein Anbieter erforderlich
   
   Ich wollte Context Provider vermeiden, um den Hook global zu machen und seine Verwendung so einfach wie möglich zu halten. Also habe ich eine Version des Hakens basierend auf einem Zustand-Shop erstellt (siehe Beispiel unten).

4. Lernübung
   
   Der Aufbau einer asynchronen Bibliothek von Grund auf ist eine hervorragende Möglichkeit, Parallelität, Caching und die internen Aspekte der Zustandsverwaltung zu verstehen.

Kurz gesagt, das Erstellen meines eigenen Hakens war eine Chance, genau die Funktionen zu verfeinern, die ich brauche (und diejenigen zu überspringen, die ich nicht brauche) und gleichzeitig die Bibliothek klein und leicht verständlich zu halten.

Abgedeckte Funktionen

Der React-Hook verwaltet:

• Abruf- und Statusverwaltung: Verwaltet Lade-, Fehler-, Erfolgs- und abgerufene Status.
• Caching & Storage: Zwischenspeichert optional Daten (über React States oder Zustand unter der Haube) und bietet lokale Speicherunterstützung.
• Wiederholungen und erneute Validierung: Konfigurierbare Wiederholungsversuchslimits und automatische Neuvalidierungsintervalle.
• Aktivierung und Invalidierung: Aktiviert und deaktiviert Abfragen automatisch abhängig von anderen Abfragen oder Zuständen. Beispiel: Einige Daten automatisch abrufen, wenn sich der Benutzer anmeldet. Und sie ungültig machen, wenn sich der Benutzer abmeldet.
• Paralleles Komponenten-Mount-Abrufen: Verhindert mehrere gleichzeitige Anforderungen für dieselbe Ressource, wenn mehrere Komponenten gleichzeitig gemountet werden.

So funktioniert der Kodex

Im Folgenden finden Sie die wichtigsten Punkte in api-refetch und kurze Verweise auf die relevanten Teile des Codes in useAsync.tsx.

1. Abrufen und Bearbeiten der parallelen Montage

• Codeausschnitt:

  // 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;
  };

• Erklärung: Hier speichern wir jeden laufenden Abruf in einer pendingPromises-Map. Wenn zwei Komponenten versuchen, dieselbe Ressource gleichzeitig abzurufen (durch die gleichen keyWithArgs), verwendet die zweite Komponente einfach die laufende Anforderung wieder, anstatt einen doppelten Netzwerkaufruf durchzuführen.

---

2. Verlängerung

• Codeausschnitt:

  // Handle periodic revalidation if caching is enabled
  useEffect(
    () => {
      if (!revalidationEnabled || revalidateTime  {
        fetch(...storedArgsRef.current);
      }, revalidateTime);

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

• Erklärung: Immer wenn Sie die erneute Validierung aktivieren, prüft api-refetch, ob die zwischengespeicherten Daten älter als eine angegebene revalidateTime sind. Wenn dies der Fall ist, werden die Daten automatisch im Hintergrund erneut abgerufen, um Ihre Benutzeroberfläche ohne zusätzliche manuelle Auslöser synchron zu halten.

---

3. Logik wiederholen

• Codeausschnitt:

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

• Erklärung: Im Fehlerfall zählt der Hook, wie viele Fehlversuche aufgetreten sind. Wenn es immer noch unter dem retryLimit liegt, wartet es automatisch retryTime Millisekunden, bevor es es erneut versucht. Dieser Vorgang wird fortgesetzt, bis die Daten erfolgreich abgerufen wurden oder das Wiederholungslimit erreicht ist.

---

4. Automatischer Abruf

• Codeausschnitt:

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

• Erklärung: Wenn autoFetch auf „true“ gesetzt ist, führt der Hook automatisch die asynchrone Funktion aus, sobald die Komponente gemountet wird – perfekt für „Fire-and-Forget“-Szenarien, in denen Sie die Daten immer geladen haben möchten.

---

Die vollständige Quelle finden Sie auf GitHub

Sehen Sie sich hier den vollständigen Code an, der lokale Speicherlogik, Abfrageungültigmachung und mehr enthält:

• Vollständiger Quellcode

Probieren Sie es einfach aus, melden Sie Probleme oder leisten Sie einen Beitrag, wenn Sie interessiert sind. Wir freuen uns über jedes Feedback!

Anwendungsbeispiel

Installation

Kopieren Sie den Code oder codieren Sie das (Repo)[https://github.com/aymericzip/api-refetch]

Oder

  // 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;
  };

Kurzes Beispiel

  // Handle periodic revalidation if caching is enabled
  useEffect(
    () => {
      if (!revalidationEnabled || revalidateTime  {
        fetch(...storedArgsRef.current);
      }, revalidateTime);

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

---

Das ist es! Probieren Sie es aus und lassen Sie mich wissen, wie es läuft. Feedback, Fragen oder Beiträge sind auf GitHub mehr als willkommen.

GitHub: api-refetch

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonPräsentation eines leichtgewichtigen Hooks für den asynchronen Datenabruf und das Caching in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!