Wie ich API-Aufrufe in meiner React-App optimiert habe

Als React-Entwickler sind wir oft mit Szenarien konfrontiert, in denen mehrere schnelle Zustandsänderungen mit einer API synchronisiert werden müssen. Für jede kleine Änderung einen API-Aufruf durchzuführen, kann sowohl für den Client als auch für den Server ineffizient und belastend sein. Hier kommen Entprellung und cleveres Zustandsmanagement ins Spiel. In diesem Artikel erstellen wir einen benutzerdefinierten React-Hook, der parallele API-Update-Aufrufe erfasst, indem er Nutzlasten zusammenführt und den API-Aufruf entprellt.

Das Problem

Stellen Sie sich ein Eingabefeld vor, in dem Benutzer Einstellungen oder Präferenzen anpassen können. Jeder Tastendruck oder jede Anpassung könnte einen API-Aufruf auslösen, um den neuen Status zu speichern. Wenn ein Benutzer mehrere Änderungen schnell hintereinander vornimmt, kann dies zu einer Flut von API-Anfragen führen:

• Ineffiziente Nutzung von Netzwerkressourcen.
• Potenzielle Rennbedingungen.
• Unnötige Belastung des Servers.

Geben Sie Entprellen ein

Entprellen ist eine Technik, die verwendet wird, um die Rate zu begrenzen, mit der eine Funktion ausgelöst werden kann. Anstatt die Funktion sofort aufzurufen, warten Sie eine bestimmte Zeit der Inaktivität, bevor Sie sie ausführen. Wenn vor Ablauf der Verzögerung ein weiterer Anruf eingeht, wird der Timer zurückgesetzt.

Warum Entprellen verwenden?

• Leistungsverbesserung: Reduziert die Anzahl unnötiger API-Aufrufe.
• Ressourcenoptimierung: Minimiert Serverlast und Netzwerknutzung.
• Verbesserte Benutzererfahrung: Verhindert Verzögerungen und potenzielle Fehler durch schnelle, aufeinanderfolgende Anrufe.

Die Rolle von useRef

In React ist useRef ein Hook, der es Ihnen ermöglicht, veränderliche Werte zwischen Renderings beizubehalten, ohne ein erneutes Rendering auszulösen. Es handelt sich im Wesentlichen um einen Container, der einen veränderlichen Wert enthält.

Warum hier useRef verwenden?

• Akkumulierte Aktualisierungen beibehalten: Wir müssen die akkumulierten Aktualisierungen zwischen den Renderings im Auge behalten, ohne dass es zu erneuten Renderings kommt.
• Zugriff auf veränderlichen aktuellen Wert: useRef gibt uns eine .current-Eigenschaft, die wir lesen und schreiben können.

Der useDebouncedUpdate-Hook

Lassen Sie uns in den Code eintauchen und verstehen, wie alles zusammenhängt.

import { debounce } from "@mui/material";
import { useCallback, useEffect, useRef } from "react";

type DebouncedUpdateParams = {
  id: string;
  params: Record<string, any>;
};

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef<DebouncedUpdateParams | null>(null);

  const processUpdates = useRef(
    debounce(() => {
      if (accumulatedUpdates.current) {
        apiUpdate(accumulatedUpdates.current);
        accumulatedUpdates.current = null;
      }
    }, delay),
  ).current;

  const handleUpdate = useCallback(
    (params: DebouncedUpdateParams) => {
      accumulatedUpdates.current = {
        id: params.id,
        params: {
          ...(accumulatedUpdates.current?.params || {}),
          ...params.params,
        },
      };
      processUpdates();
    },
    [processUpdates],
  );

  useEffect(() => {
    return () => {
      processUpdates.clear();
    };
  }, [processUpdates]);

  return handleUpdate;
}

export default useDebouncedUpdate;

Aufschlüsseln

1. Akkumulieren von Updates mit useRef

Wir initialisieren eine useRef namens AccumulatedUpdates, um die kombinierten Parameter aller eingehenden Updates zu speichern.

const akkumulierteUpdates = useRef(null);

2. Entprellen des API-Aufrufs

Wir erstellen eine entprellte Funktion „processUpdates“ mithilfe des Entprellungsdienstprogramms von Material UI.

const processUpdates = useRef(
  debounce(() => {
    if (accumulatedUpdates.current) {
      apiUpdate(accumulatedUpdates.current);
      accumulatedUpdates.current = null;
    }
  }, delay),
).current;

• Warum useRef für ProcessUpdates? Wir verwenden useRef, um sicherzustellen, dass die entprellte Funktion nicht bei jedem Rendern neu erstellt wird, was den Entprellungs-Timer zurücksetzen würde.

3. Handhabung von Updates mit useCallback

Die handleUpdate-Funktion ist für das Sammeln von Aktualisierungen und das Auslösen des entprellten API-Aufrufs verantwortlich.

const handleUpdate = useCallback(
  (params: DebouncedUpdateParams) => {
    accumulatedUpdates.current = {
      id: params.id,
      params: {
        ...(accumulatedUpdates.current?.params || {}),
        ...params.params,
      },
    };
    processUpdates();
  },
  [processUpdates],
);

• Parameter zusammenführen: Wir führen die neuen Parameter mit allen vorhandenen zusammen, um sicherzustellen, dass alle Aktualisierungen erfasst werden.
• Trigger Debounce: Jedes Mal, wenn handleUpdate aufgerufen wird, lösen wir ProcessUpdates() aus, aber der eigentliche API-Aufruf wird entprellt.

4. Aufräumen mit useEffect

Wir löschen die entprellte Funktion, wenn die Bereitstellung der Komponente aufgehoben wird, um Speicherlecks zu verhindern.

useEffect(() => {
  return () => {
    processUpdates.clear();
  };
}, [processUpdates]);

Wie es funktioniert

1. Parameter akkumulieren: Jedes Update fügt seine Parameter zu AccumulatedUpdates.current hinzu und führt sie mit allen vorhandenen Parametern zusammen.
2. Debounce Execution: ProcessUpdates wartet vor der Ausführung auf mehrere Millisekunden Inaktivität.
3. API-Aufruf: Sobald die Entprellungszeit verstrichen ist, wird apiUpdate mit den zusammengeführten Parametern aufgerufen.
4. Akkumulierte Updates zurücksetzen: Nach dem API-Aufruf setzen wir AccumulatedUpdates.current auf Null zurück.

Anwendungsbeispiel

So können Sie diesen Hook in einer Komponente verwenden:

import React from "react";
import useDebouncedUpdate from "./useDebouncedUpdate";

function SettingsComponent() {
  const debouncedUpdate = useDebouncedUpdate(updateSettingsApi, 500);

  const handleChange = (settingName, value) => {
    debouncedUpdate({
      id: "user-settings",
      params: { [settingName]: value },
    });
  };

  return (
    <div>
      <input
        type="text"
        onChange={(e) => handleChange("username", e.target.value)}
      />
      <input
        type="checkbox"
        onChange={(e) => handleChange("notifications", e.target.checked)}
      />
    </div>
  );
}

function updateSettingsApi({ id, params }) {
  // Make your API call here
  console.log("Updating settings:", params);
}

• Benutzeraktionen: Während der Benutzer Einstellungen eingibt oder umschaltet, wird handleChange aufgerufen.
• Entprellte Updates: Änderungen werden akkumuliert und nach 500 ms Inaktivität an die API gesendet.

Abschluss

Durch die Kombination von Entprellen und Zustandsakkumulation können wir effiziente und reaktionsfähige Anwendungen erstellen. Der useDebouncedUpdate-Hook stellt sicher, dass schnelle Änderungen gebündelt werden, wodurch unnötige API-Aufrufe reduziert und die Leistung verbessert werden.

Wichtige Erkenntnisse:

• Entprellen ist für die Verwaltung schnell aufeinanderfolgender Anrufe unerlässlich.
• useRef ermöglicht es uns, den veränderlichen Zustand beizubehalten, ohne erneute Renderings zu verursachen.
• Benutzerdefinierte Hooks wie useDebouncedUpdate kapseln komplexe Logik und machen Komponenten sauberer und wartbarer.

Fühlen Sie sich frei, diesen Hook in Ihre Projekte zu integrieren und ihn an Ihre spezifischen Bedürfnisse anzupassen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonWie ich API-Aufrufe in meiner React-App optimiert habe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!