Serveranfragen mit React Hooks optimieren

Einführung

Sind Sie als React-Entwickler es leid, mit schlecht verwalteten Serveranfragen zu kämpfen? Dann suchen Sie nicht weiter! React Hooks sind eine leistungsstarke Funktion der React-Bibliothek, mit der Entwickler Zustände und andere React-Funktionen in funktionalen Komponenten nutzen können. So optimieren Sie Ihre Serveranfragen und steigern die Performance Ihrer Webanwendung deutlich.

Vielleicht fragen Sie sich: “Was ist denn so wichtig an Serveranfragen? Warum spielen sie eine Rolle?» Nun, ich erkläre es Ihnen: Serveranfragen haben einen entscheidenden Einfluss auf die Benutzererfahrung. Schlecht verwaltete Serveranfragen können zu langen Ladezeiten, schlechter Performance und einer frustrierenden Benutzererfahrung führen. React Hooks bieten eine Möglichkeit, Serveranfragen effizient und übersichtlich zu verwalten, was zu schnelleren Ladezeiten, verbesserter Performance und einer besseren Benutzererfahrung führt.

Dieses Tutorial führt Sie durch die Verwendung von React Hooks, um die Serveranfrageleistung zu verbessern, Serveranfragen effektiver zu verwalten und optimierte Webanwendungen zu erstellen.

Am Ende dieses Tutorials werden Sie ein umfassendes Verständnis dafür haben, wie Sie React Hooks zur Optimierung von Serveranfragen einsetzen können und diese Techniken in Ihren Projekten implementieren können, um die Leistung und Benutzerfreundlichkeit Ihrer Webanwendungen zu verbessern.

Voraussetzungen

• JavaScript verstehen
• Einführung in React Hooks
• Lerne, wie man Serveranfragen in JavaScript stellt.
• Ein Arbeitsumfeld für die Weiterentwicklung
• Ein Code-Editor

Darüber hinaus wären Erfahrung im Umgang mit APIs und Kenntnisse der RESTful-Prinzipien von Vorteil.

Wenn Sie noch keine Erfahrung mit Server-Request-Optimierung haben, keine Sorge – dieses Tutorial richtet sich an Entwickler aller Erfahrungsstufen. Sollten Ihnen die Konzepte noch nicht geläufig sein, empfiehlt es sich, weitere Recherchen und Experimente durchzuführen. Aber keine Angst: Mit etwas Geduld und Übung beherrschen Sie die Server-Request-Optimierung im Handumdrehen! Legen wir also los und steigern wir die Performance Ihrer React-App.

Einrichten eines neuen React-Projekts

Die Einrichtung eines neuen React-Projekts kann für Anfänger eine Herausforderung sein, doch mit dem Create React App (CRA)-Tool ist es jetzt so einfach wie nie zuvor. CRA ist ein beliebtes Kommandozeilen-Tool, das die Einrichtung neuer React-Projekte automatisiert und eine optimierte Entwicklungsumgebung für die Erstellung von React-Anwendungen bietet.

Um ein React-Projekt zu erstellen, müssen Sie Node.js und npm auf Ihrem Computer installieren. Falls Sie diese noch nicht installiert haben, können Sie sie von der offiziellen Node.js-Website herunterladen. Sobald Sie diese Tools installiert haben, öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung und wechseln Sie in das Verzeichnis, in dem die Anwendung erstellt werden soll. Verwenden Sie anschließend den folgenden Befehl, um ein neues React-Projekt zu erstellen:

 npx create-react-app digital-ocean-tutorial

Wenn die Anwendung erfolgreich erstellt wurde, wird folgende Ausgabe angezeigt:

...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd digital-ocean-tutorial
npm start

Dadurch wird ein neues Verzeichnis mit dem gleichen Namen wie Ihr Projekt erstellt, das alle notwendigen Dateien für Ihr neues React-Projekt enthält.

Sobald der Einrichtungsprozess abgeschlossen ist, wechseln Sie mit folgendem Befehl in das neue React-Projektverzeichnis:

cd digital-ocean-tutorial

Führen Sie anschließend folgenden Befehl aus, um den Entwicklungsserver zu starten:

npm start

Wenn alles gut gegangen ist, sollte der Server starten und die folgende Ausgabe angezeigt werden:

Compiled successfully!
You can now view digital-ocean-tutorial in the browser
http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.

Dadurch wird Ihr neues React-Projekt in Ihrem Standard-Webbrowser gestartet. Sie sollten nun die Meldung “Willkommen bei React” sehen, was bedeutet, dass Ihr Projekt korrekt eingerichtet ist und Sie mit der Entwicklung Ihrer nächsten großartigen App beginnen können!

Mit CRA können Sie sich auf das Schreiben von Code konzentrieren, ohne sich Gedanken über die Einrichtung und Konfiguration Ihrer Entwicklungsumgebung machen zu müssen.

Nachdem Sie Ihr React-Projekt nun eingerichtet haben, schauen wir uns die verschiedenen Möglichkeiten an, wie wir Serveranfragen mithilfe von React Hooks optimieren können.

Komponenten mit dem UseEffect-Hook synchronisieren

Der useEffect-Hook in React ermöglicht es Entwicklern, eine Komponente mit einem externen System, wie beispielsweise einem Server, zu synchronisieren, indem er Nebenwirkungen wie das Abrufen von Daten effizient und nachvollziehbar handhabt. Einer der häufigsten Anwendungsfälle für den useEffect-Hook ist das Senden von Serveranfragen und das Aktualisieren des Komponentenzustands.

Eine Möglichkeit, den useEffect-Hook für Serveranfragen zu nutzen, besteht darin, innerhalb des useEffect-Hooks eine Funktion aufzurufen, die die Anfrage ausführt. Diese Funktion sollte die Fetch API oder eine Bibliothek wie Axios verwenden, um die Anfrage zu senden, und anschließend den Zustand der Komponente mithilfe des setState-Hooks mit den Antwortdaten aktualisieren.

Betrachten wir ein Beispiel, wie man den useEffect-Hook verwendet, um Daten von einer JSON-Surrogate-API abzurufen und den Zustand der Komponente zu aktualisieren. Öffnen Sie die Datei app.js im src-Ordner Ihres Projekts, entfernen Sie den Standardcode und ersetzen Sie ihn durch den folgenden Codeausschnitt:

import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setData(data);
}
fetchData();
}, []);
return (
<div>
{data.map((item) => (
<div key={item.id}>
<h2>- {item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
);
}
export default MyComponent

Im obigen Beispiel wird der `useEffect`-Hook mit einem leeren Abhängigkeitsarray aufgerufen, was bedeutet, dass er nur beim ersten Rendern der Komponente ausgeführt wird. Der Komponentenzustand wird mit einem leeren Array initialisiert, und die Funktion `fetchData` wird innerhalb des `useEffect`-Hooks aufgerufen, um eine Anfrage an den Server zu senden und den Zustand mit den Antwortdaten zu aktualisieren.

Wenn Sie den Browser oder die Anwendung aktualisieren, sollten Sie das Ergebnis der Anfrage aus dem obigen Codebeispiel sehen können, wie in der folgenden Abbildung dargestellt:

Es ist wichtig zu beachten, dass unnötige Neuzeichnungen Leistungsprobleme verursachen können. Daher sollte die Anzahl der durch den useEffect-Hook ausgelösten Neuzeichnungen minimiert werden. Eine Möglichkeit hierfür ist, nur die vom Hook verwendeten Props und State-Variablen in das Abhängigkeitsarray aufzunehmen.

Eine korrekte Fehlerbehandlung bei Serveranfragen ist wichtig, um Funktionsstörungen der Komponente zu vermeiden. Dies kann durch einen try-catch-Block in der Funktion `fetchData` und mithilfe des `setError`-Hooks erreicht werden, der den Komponentenstatus mit einer Fehlermeldung aktualisiert. So kann die Anwendung dem Benutzer im Fehlerfall eine Fehlermeldung anzeigen.

Durch die Anwendung bewährter Methoden können Sie Serveranfragen in einer React-Komponente sicher bearbeiten und ein besseres Benutzererlebnis schaffen.

Optimieren Sie die Serveranfrageleistung mithilfe des useMemo-Hooks

Der `useMemo`-Hook in React ist ein Tool zur Leistungsoptimierung, mit dem Entwickler Daten speichern können, indem sie die Ergebnisse von Berechnungen ablegen, sodass diese wiederverwendet werden können, ohne den Prozess wiederholen zu müssen. Dies ist besonders bei Serveranfragen hilfreich, da es unnötiges erneutes Rendern verhindern und die Komponentenleistung verbessern kann.

Eine Möglichkeit, den `useMemo`-Hook im Kontext einer Serveranfrage zu verwenden, besteht darin, die vom Server zurückgegebenen Daten zu speichern und damit den Zustand der Komponente zu aktualisieren. Dies kann durch Aufruf des `useMemo`-Hooks innerhalb des `useEffect`-Hooks erreicht werden. Dabei werden die Serverdaten als erstes Argument und ein Abhängigkeits-Array als zweites Argument übergeben. Das Abhängigkeits-Array sollte alle Eigenschaften oder Zustandsvariablen enthalten, die zur Berechnung der gespeicherten Daten verwendet werden.

Um diese Methode mit dem useMemo-Hook zum Speichern von Daten aus der JSON-Surrogate-API und zum Aktualisieren des Komponentenstatus auszuprobieren, ersetzen Sie den Code in app.js durch den folgenden Codeausschnitt:

import { useEffect, useState, useMemo } from 'react';
function MyComponent({ postId }) {
const [data, setData] = useState({});
useEffect(() => {
async function fetchData() {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
const data = await response.json();
setData(data);
}
fetchData();
}, [postId]);
const title = useMemo(() => data.title, [data]);
return (
<div>
<h2>{title}</h2>
</div>
);
}
export default MyComponent

Im obigen Beispiel wird der `useEffect`-Hook mit `postId` als Abhängigkeitsarray aufgerufen. Das bedeutet, er wird immer dann ausgeführt, wenn sich die `postId`-Eigenschaft ändert. Der Komponentenzustand wird mit einem leeren Objekt initialisiert. Anschließend wird innerhalb des `useEffect`-Hooks die Funktion `fetchData` aufgerufen, um eine Anfrage an den Server zu senden und den Zustand mit den Antwortdaten zu aktualisieren. Innerhalb der Komponente verwenden wir den `useMemo`-Hook, um den Titel zu verwalten. Dazu übergeben wir `data.title` als erstes und `[data]` als zweites Argument, sodass der Titel bei jeder Änderung der Daten aktualisiert wird.

Nachfolgend das Ergebnis der Anfrage im obigen Codebeispiel:

Beachten Sie, dass `useMemo` nicht immer notwendig ist und nur dann verwendet werden sollte, wenn die Komponente von Eigenschaften oder Zuständen abhängt, die sich häufig ändern und rechenintensiv sind. Eine unsachgemäße Verwendung von `useMemo` kann zu Speicherlecks und anderen Leistungsproblemen führen.

Verwaltung des Serveranfragestatus mit dem useReducer-Hook

Der `useReducer`-Hook in React ähnelt dem `useState`-Hook, ermöglicht aber eine komplexere und besser vorhersagbare Zustandsverwaltung. Anstatt den Zustand direkt zu aktualisieren, erlaubt `useReducer` das Auslösen von Aktionen, die die Zustandsaktualisierung beschreiben, sowie einer Reducer-Funktion, die den Zustand basierend auf dieser Aktion aktualisiert.

Ein Vorteil der Verwendung des `useReducer`-Hooks zur Verarbeitung von Serveranfragen ist die bessere Trennung der Zuständigkeiten. Anstatt die Logik zur Verarbeitung von Serveranfragen über die gesamte Komponente zu verteilen, kann sie in der Reducer-Funktion gekapselt werden, wodurch der Komponentencode leichter verständlich und wartbar wird.

Um diesen Ansatz mit dem useReducer-Hook auszuprobieren, um Daten aus einer JSON-Variablen-API zu speichern und den Zustand der Komponente zu aktualisieren, ersetzen Sie den Code in app.js durch den folgenden Codeausschnitt:

import { useReducer } from 'react';
const initialState = { data: [], loading: false, error: '' };
const reducer = (state, action) => {
switch (action.type) {
case 'FETCH_DATA_REQUEST':
return { ...state, loading: true };
case 'FETCH_DATA_SUCCESS':
return { ...state, data: action.payload, loading: false };
case 'FETCH_DATA_FAILURE':
return { ...state, error: action.payload, loading: false };
default:
return state;
}
};
function MyComponent() {
const [state, dispatch] = useReducer(reducer, initialState);
const fetchData = async () => {
dispatch({ type: 'FETCH_DATA_REQUEST' });
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
}
};
return (
<div>
{state.loading ? (
<p>Loading...</p>
) : state.error ? (
<p>{state.error}</p>
) :
<div>
{state.data.map((item) => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
)}
<button onClick={fetchData}>Fetch Data</button>
</div>
);
}
export default MyComponent

Im bereitgestellten Codeausschnitt wird der `useReducer`-Hook mit der `reducer`-Funktion aufgerufen und der Anfangszustand als Argument übergeben. Der Komponentenzustand wird mit einem leeren Array als Daten, einer auf `false` gesetzten Ladevariable und einer leeren Fehlermeldungsvariable initialisiert. Beim Klicken auf die Schaltfläche “Daten abrufen” wird die Funktion `fetchData` ausgeführt, die je nach Status der Anfrage (Erfolg oder Fehler) Aktionen auslöst.

Nachfolgend das Ergebnis der im obigen Codebeispiel gestellten Anfrage:

Darüber hinaus ermöglicht der useReducer-Hook eine effizientere Verwaltung komplexer Zustände. Durch die Verwendung von Aktionen und Reducern zur Aktualisierung des Zustands lässt sich die Auswirkung verschiedener Aktionen auf unterschiedliche Teile des Zustands leichter steuern, wodurch das Hinzufügen neuer Funktionen und die Fehlerbehebung in der Anwendung vereinfacht werden.

Ergebnis

Kurz gesagt, hat dieses Tutorial die Grundlagen der Optimierung von Serveranfragen mit React Hooks behandelt. React Hooks sind eine leistungsstarke Funktion der React-Bibliothek, die es Entwicklern ermöglicht, Zustand und andere React-Funktionen in funktionalen Komponenten zu nutzen. Mithilfe der Hooks `useEffect`, `useMemo` und `useReducer` lassen sich Serveranfragen einfach verwalten und optimieren. Dies führt zu kürzeren Ladezeiten, verbesserter Performance und einer besseren Benutzererfahrung. Durch die Anwendung der in diesem Tutorial gezeigten Techniken können Sie die Performance und Benutzerfreundlichkeit Ihrer Webanwendungen verbessern.

Jetzt sind Sie an der Reihe, diese Techniken in Ihren eigenen Projekten auszuprobieren. Im nächsten Schritt können Sie sich mit fortgeschritteneren Themen wie Paginierung und Caching beschäftigen. Denken Sie daran, dass React Hooks eine sich ständig weiterentwickelnde Technologie ist. Bleiben Sie daher über die neuesten Updates und Best Practices auf dem Laufenden, um Ihre Serveranfragen kontinuierlich zu optimieren.