Gegenbeispiel mit useEffect und React Query

Lassen Sie uns ein Gegenbeispiel durchgehen, bei dem sowohl useEffect als auch React Query zum Abrufen und Anzeigen von Daten in einer React-Komponente verwendet werden. Dabei konzentrieren wir uns darauf, wie jeder Ansatz mit dem Datenabruf und Nebenwirkungen umgeht.

Wir gehen davon aus, dass wir den aktuellen Zählerstand von einer API abrufen und dieser Zählerstand in Echtzeit aktualisiert wird. Ziel ist es, den Zähler anzuzeigen und ihn mit neuen Daten aus der API auf dem neuesten Stand zu halten.

Szenario 1: Verwendung von useEffect

Hier verwenden wir useEffect, um die Zählerdaten abzurufen und den Status manuell zu verwalten.

import React, { useState, useEffect } aus „react“;

Funktion Counter() {
const [count, setCount] = useState(null); // Geben Sie an, dass der Zähler gespeichert werden soll
const [loading, setLoading] = useState(true); // Status zum Laden
const [error, setError] = useState(null); // Status für Fehlerbehandlung

useEffect(() => {
const fetchCounter = async () => {
versuche es mit {
setLoading(true); // Laden starten
const Antwort = Warten auf fetch("/api/counter"); // API-Aufruf, um den Zählerwert zu erhalten
if (!response.ok) {
throw new Error("Fehler beim Abrufen des Zählers");
}
const data = waiting Response.json();
setCount(data.count); // Zählerwert festlegen
} Catch (err) {
setError(err.message); // Fehlerstatus festlegen
} endlich {
setLoading(false); // Laden stoppen
}
};

fetchCounter(); // Fetch the counter on mount

}, []); // Leeres Abhängigkeitsarray bedeutet, dass es einmal beim Mounten ausgeführt wird

if (loading) return

Loading...;
if (error) return Fehler: {error};

zurück (

Zähler: {count}

);
}

Standardzähler exportieren;

Erklärung:

Zustandsverwaltung: Wir verwalten manuell drei Zustände: Anzahl, Laden und Fehler.

Datenabruf: Die fetchCounter-Funktion ist im useEffect-Hook definiert, der beim Komponenten-Mount (leeres Abhängigkeitsarray) ausgeführt wird.

Fehlerbehandlung und Laden: Sowohl der Lade- als auch der Fehlerstatus müssen explizit behandelt werden.

Erneutes Abrufen: Wenn wir Daten erneut abrufen müssen (z. B. wenn der Benutzer die Seite erneut besucht oder wenn das Fenster den Fokus wiedererlangt), müssen wir diese Logik manuell implementieren.

Szenario 2: Verwendung von React Query

Hier verwenden wir React Query, um den Datenabrufprozess zu vereinfachen. React Query kümmert sich automatisch um Caching, Laden, Fehler und erneutes Abrufen.

React aus „react“ importieren;
import { useQuery } from „react-query“;

Funktion Counter() {
const { data, error, isLoading } = useQuery("counter", async () => {
const Antwort = Warten auf fetch("/api/counter");
if (!response.ok) {
throw new Error("Fehler beim Abrufen des Zählers");
}
return Response.json();
});

if (isLoading) return

Loading...;
if (error) return Error: {error.message};

zurück (

Zähler: {data.count}

);
}

Standardzähler exportieren;

Erklärung:

Statusverwaltung: React Query verwaltet automatisch den Status (Laden, Fehler, Daten). Es ist nicht erforderlich, Lade- oder Fehlerzustände explizit festzulegen.

Datenabruf: Der useQuery-Hook vereinfacht den Datenabruf. Es verwaltet automatisch Caching, Hintergrundaktualisierungen und Wiederholungsversuche.

Fehlerbehandlung und -laden: React Query behandelt diese intern und der Hook gibt isLoading und Fehlerzustände zurück, die direkt in der Benutzeroberfläche verwendet werden können.

Erneutes Abrufen: React Query ruft Daten automatisch erneut ab, wenn der Benutzer die Seite erneut besucht oder wenn das Fenster den Fokus erhält. Es kann auch so eingerichtet werden, dass es in regelmäßigen Abständen oder basierend auf benutzerdefinierten Bedingungen erneut abgerufen wird.

Vergleich der beiden Ansätze:

Fazit:

useEffect eignet sich hervorragend für die Handhabung benutzerdefinierter oder einmaliger Nebenwirkungen, aber wenn es um den Datenabruf geht, sind manuelle Statusverwaltung und mehr Boilerplate-Code erforderlich.

React Query vereinfacht das Abrufen von Daten erheblich, indem es allgemeine Aufgaben wie Laden, Fehlerbehandlung und Caching abstrahiert. Es ist ideal für Szenarien, in denen Sie mit sich häufig ändernden Daten zu tun haben oder Funktionen wie erneutes Abrufen und Caching im Hintergrund benötigen.

Das obige ist der detaillierte Inhalt vonGegenbeispiel mit useEffect und React Query. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!