ReactJS - Verwendung von useEffect: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, zukünftige React-Zauberer! Heute werden wir eine aufregende Reise in die Welt von useEffect in React antreten. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Ihr freundlicher Guide sein, und wir werden dies Schritt für Schritt durchgehen. Am Ende dieses Tutorials werden Sie useEffect wie ein Profi einsetzen können!

Was ist useEffect?

Bevor wir tiefer einsteigen, lassen Sie uns verstehen, was useEffect eigentlich macht. Stellen Sie sich vor, Sie backen einen Kuchen. Sie mischen die Zutaten, stellen ihn in den Ofen, und dann... was? Sie möchten vielleicht einen Timer stellen, oder? Das ist sozusagen, was useEffect in React macht. Es ermöglicht Ihnen, "Nebenwirkungen" in Ihren Komponenten auszuführen.

Nebenwirkungen sind Aktionen, die neben der Hauptaufgabe Ihrer Komponente, nämlich das Rendern von UI, geschehen. Dies könnten Dinge wie:

• Daten von einer API abrufen
• Das DOM manuell ändern
• Abonnements einrichten

Nun, lassen Sie uns ins Detail gehen!

Syntax von useEffect

Das Hook useEffect hat eine bestimmte Schreibweise. Lassen Sie uns das auseinandernehmen:

useEffect(() => {
// Ihr Effect-Code hier
}, [dependencies]);

Hier ist, was jeder Teil bedeutet:

1. useEffect: Dies ist der Name des Hooks, den wir verwenden.
2. () => { ... }: Dies ist eine Pfeilfunktion, in der wir unseren Effect-Code platzieren.
3. [dependencies]: Dies ist ein optionaler Array, in dem wir alle Werte auflisten, von denen unser Effect abhängt.

Sehen wir uns ein einfaches Beispiel an:

import React, { useEffect, useState } from 'react';

function Timer() {
const [seconds, setSeconds] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);

return () => clearInterval(interval);
}, []);

return <div>Seconds: {seconds}</div>;
}

In diesem Beispiel erstellen wir einen einfachen Timer. Das useEffect Hook richtet einen Intervall ein, der unseren seconds Zustand jede Sekunde erhöht. Der leere Abhängigkeitsarray [] bedeutet, dass dieser Effect nur einmal läuft, wenn die Komponente gemountet wird.

Features des Effect Hooks

Nun, da wir ein einfaches Beispiel gesehen haben, lassen Sie uns einige wichtige Features des Effect Hooks erkunden:

1. Zeitpunkt: Effects werden standardmäßig nach jedem Rendern ausgeführt.
2. Bedingte Ausführung: Wir können steuern, wann Effects ausgeführt werden, indem wir den Abhängigkeitsarray verwenden.
3. Bereinigung: Effects können eine Bereinigungsfunktion zurückgeben, um Speicherlecks zu verhindern.

Lassen Sie uns jeden dieser Punkte im Detail betrachten.

Zeitpunkt

Standardmäßig werden useEffect nach jedem Rendern ausgeführt. Das bedeutet, wenn Sie den Zustand in Ihrem Effect aktualisieren, könnte dies zu einer Endlosschleife führen! Hier ist ein Beispiel, was MAN NICHT tun sollte:

function BadExample() {
const [count, setCount] = useState(0);

useEffect(() => {
setCount(count + 1); // Dies verursacht eine Endlosschleife!
});

return <div>{count}</div>;
}

Bedingte Ausführung

Um zu verhindern, dass Effects unnötig ausgeführt werden, können wir einen Abhängigkeitsarray bereitstellen:

function ConditionalEffect({ userId }) {
const [user, setUser] = useState(null);

useEffect(() => {
fetchUser(userId).then(data => setUser(data));
}, [userId]);

return <div>{user ? user.name : 'Loading...'}</div>;
}

In diesem Beispiel wird der Effect nur ausgeführt, wenn userId sich ändert.

Bereinigung

Manche Effects müssen bereinigt werden, um Speicherlecks zu verhindern. Hier ist, wie wir das machen können:

function CleanupExample() {
useEffect(() => {
const subscription = subscribeToSomething();

return () => {
subscription.unsubscribe();
};
}, []);

return <div>I'm subscribed!</div>;
}

Die Funktion, die vom Effect zurückgegeben wird, wird aufgerufen, wenn die Komponente unmountet.

Datenabruf mit Effect

Eine häufige Verwendung von useEffect ist das Abrufen von Daten von einer API. Sehen wir uns ein Beispiel an:

function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return <div>Data: {JSON.stringify(data)}</div>;
}

Diese Komponente ruft Daten ab, wenn sie gemountet wird, verarbeitet Lade- und Fehlerzustände und zeigt die Daten an, wenn sie bereit sind.

DOM-Manipulationen

useEffect kann auch verwendet werden, um das DOM direkt zu manipulieren. Hier ist ein Beispiel:

function DOMManipulator() {
useEffect(() => {
const element = document.getElementById('my-element');
element.style.color = 'red';

return () => {
element.style.color = '';
};
}, []);

return <div id="my-element">I'm red!</div>;
}

Dieser Effect ändert die Farbe eines Elements auf rot, wenn die Komponente gemountet wird, und setzt sie zurück, wenn die Komponente unmountet.

Bereinigungsfunktion

Wir haben bereits über Bereinigungsfunktionen gesprochen, aber lassen Sie uns tiefer einsteigen. Bereinigungsfunktionen sind entscheidend, um Speicherlecks zu verhindern. Hier ist ein komplexeres Beispiel:

function WindowResizer() {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth);
window.addEventListener('resize', handleResize);

return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

return <div>Window width: {windowWidth}px</div>;
}

In diesem Beispiel fügen wir einen Event-Listener hinzu, wenn die Komponente gemountet wird, und entfernen ihn, wenn die Komponente unmountet. Dies verhindert, dass der Listener weiterhin aktiv bleibt, wenn wir ihn nicht mehr benötigen.

Zusammenfassung

Lassen Sie uns zusammenfassen, was wir über useEffect gelernt haben:

Feature	Beschreibung
Signatur	useEffect(() => { ... }, [dependencies])
Zeitpunkt	Wird standardmäßig nach jedem Rendern ausgeführt
Bedingte Ausführung	Verwenden Sie den Abhängigkeitsarray, um zu steuern, wann der Effect ausgeführt wird
Bereinigung	Returnieren Sie eine Funktion vom Effect zur Bereinigung
Datenabruf	Kann verwendet werden, um Daten von APIs abzurufen
DOM-Manipulation	Kann direkt das DOM manipulieren
Bereinigungsfunktion	Wichtig, um Speicherlecks zu verhindern

Und da haben Sie es! Sie haben gerade Ihre ersten Schritte in die Welt von useEffect unternommen. Erinnern Sie sich daran, dass wie bei jedem mächtigen Werkzeug Übung zum Meister macht. Also fürchten Sie sich nicht, zu experimentieren und Fehler zu machen – das ist, wie wir alle lernen. Viel Spaß beim Programmieren und möge Ihre Effects immer sauber und Ihre Komponenten immer reaktiv sein!

Credits: Image by storyset