Umgang mit Seiteneffekten mit dem UseEffect-Hook
Der useEffect
-Hook ermöglicht die Synchronisierung der Komponente mit externen Faktoren oder Diensten, einschließlich Datenabrufen, Abonnements, manuellen Änderungen usw.
Syntax:
Das erste Argument (setup
) ist eine Arrow-Funktion, die nach jedem Rendern ausgeführt wird. Das zweite Argument (dependencies
) ist ein optionales Array von Abhängigkeiten. Wenn dependencies
angegeben wird, wird der Effekt nur erneut ausgeführt, wenn sich eine der Abhängigkeiten seit dem letzten Rendern geändert hat. Wenn das Abhängigkeitsarray weggelassen wird, läuft der Effekt nach jedem Rendern.
useEffect(setup, dependencies)
Da wir wissen, dass das setup
eine Pfeilfunktion sein muss und die dependencies
ein Array sein müssen, ergibt sich folgender Aufbau des useEffect
-Hooks.
useEffect(() => {
// Something that we need to do
// after the component is rendered or updated
}, [<optional_dependencies>])
Hinweis
React-Komponenten basieren häufig auf der Kombination der Hooks
useEffect
unduseState
. Diese Hooks arbeiten Hand in Hand, um Zustand und Nebeneffekte innerhalb von Komponenten zu verwalten.
Beispiel 1:
Wir erstellen die Komponente Articles
, die den useEffect
-Hook verwendet, um Daten dem Zustand articles
zuzuweisen. Dies ist eine ausgezeichnete Gelegenheit, die leistungsstarke Kombination der React-Hooks zu erkunden.
import { useEffect, useState } from "react";
import fetchData from "../service/api";
const Articles = () => {
const [articles, setArticles] = useState([]);
useEffect(() => {
fetchData()
.then((resp) => {
setArticles(resp.jokes);
})
.catch((error) => {
console.error(error);
});
}, []);
return (
// Render some markup based on the articles data
);
};
In dieser Komponente nutzen wir den useEffect
-Hook, um sicherzustellen, dass der Zustand articles
mit Daten befüllt wird. Wie zuvor erwähnt, wird die Funktion useEffect
nach jedem Rendern ausgeführt, wodurch garantiert wird, dass dem Benutzer Daten angezeigt werden, sofern diese abgerufen wurden. Dies gewährleistet eine nahtlose Benutzererfahrung mit stets aktuellen Inhalten.
Zeilenweise Erklärung:
- Zeile 1: Import der Hooks
useEffect
unduseState
aus der React-Bibliothek, um deren Funktionalität zu nutzen; - Zeile 2: Import der Funktion
fetchData
aus "../service/api". Diese Funktion ist für das Ausführen einer API-Anfrage und das Abrufen von Daten zuständig; - Zeile 4: Die Komponente
Articles
wird mit der üblichen Funktionssyntax definiert; - Zeile 5: Initialisierung des Zustands mit dem Hook
useState
, der den Anfangswert der Variablearticles
darstellt. In diesem Beispiel ist es ein leeres Array; - Zeilen 7-15: Der eigentliche Anwendungsfall des
useEffect
-Hooks;- Zeile 7 und Zeile 15: Dies ist die Syntax. So wird der Hook verwendet;
- Zeile 8: Die Funktion
fetchData
wird aufgerufen. Diese Funktion soll eine API-Anfrage ausführen und ein Promise zurückgeben; - Zeilen 9-11: Wenn das Promise aufgelöst wird (
then
-Block), wird einresp
-Objekt empfangen. Die Daten werden ausresp
mitresp.jokes
extrahiert und mitsetArticles
im Zustandarticles
gespeichert; - Zeilen 12-14: Falls während der API-Anfrage ein Fehler auftritt (im
catch
-Block), wird dieser mitconsole.error
in der Konsole protokolliert.
- Zeilen 17-19: Das Markup der Komponente wird gerendert.
Vollständiger App-Code:
Beispiel 2:
Wir erstellen die Komponente Counter
, um einen counter
-Wert zu verfolgen. Die Aufgabe besteht darin, den Wert der Variablen counter
jedes Mal zu protokollieren, wenn er sich ändert. Dafür verwenden wir den useEffect
-Hook mit einem Abhängigkeitsarray, das die Variable counter
enthält.
import React, { useState, useEffect } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Count has changed:", count);
}, [count]);
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
};
Zeilenweise Erklärung:
- Zeile 1: Import der Hooks
useEffect
unduseState
aus der React-Bibliothek zur Nutzung ihrer Funktionalität; - Zeile 3: Die übliche Funktionssyntax definiert die Komponente "Counter";
- Zeile 4: Initialisierung des States mit dem
useState
-Hook, der den Anfangswert der Variablencount
repräsentiert. In diesem Beispiel ist es0
; - Zeilen 6-8: Die eigentliche Verwendung des
useEffect
-Hooks;- Zeile 7: Diese Logik wird ausgeführt, wann immer sich der Wert im Abhängigkeitsarray ändert. In diesem Fall ist es die Variable
count
; - Zeile 8: Abhängigkeitsarray. Wir teilen React mit, dass beim Ändern des Wertes der Variablen
count
der Code innerhalb der Funktion desuseEffect
-Hooks ausgeführt werden soll.
- Zeile 7: Diese Logik wird ausgeführt, wann immer sich der Wert im Abhängigkeitsarray ändert. In diesem Fall ist es die Variable
- Zeilen 14-19: Das Markup der Komponente wird gerendert.
Vollständiger App-Code:
Bitte nehmen Sie sich einen Moment Zeit, um die Konsole zu überprüfen und die Ausführungslogik der Pfeilfunktion innerhalb des useEffect
-Hooks zu beobachten. Die Pfeilfunktion wird zunächst beim ersten Rendern ausgeführt und anschließend jedes Mal erneut aufgerufen, wenn sich der Wert der Variablen counter
ändert. Sie können dieses Verhalten anhand der entsprechenden Protokolle in der Konsole nachvollziehen.
1. Was ist der Zweck des useEffect
-Hooks in React?
2. Was sind die zwei Hauptargumente, die der useEffect
-Hook entgegennimmt?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.17
Umgang mit Seiteneffekten mit dem UseEffect-Hook
Swipe um das Menü anzuzeigen
Der useEffect
-Hook ermöglicht die Synchronisierung der Komponente mit externen Faktoren oder Diensten, einschließlich Datenabrufen, Abonnements, manuellen Änderungen usw.
Syntax:
Das erste Argument (setup
) ist eine Arrow-Funktion, die nach jedem Rendern ausgeführt wird. Das zweite Argument (dependencies
) ist ein optionales Array von Abhängigkeiten. Wenn dependencies
angegeben wird, wird der Effekt nur erneut ausgeführt, wenn sich eine der Abhängigkeiten seit dem letzten Rendern geändert hat. Wenn das Abhängigkeitsarray weggelassen wird, läuft der Effekt nach jedem Rendern.
useEffect(setup, dependencies)
Da wir wissen, dass das setup
eine Pfeilfunktion sein muss und die dependencies
ein Array sein müssen, ergibt sich folgender Aufbau des useEffect
-Hooks.
useEffect(() => {
// Something that we need to do
// after the component is rendered or updated
}, [<optional_dependencies>])
Hinweis
React-Komponenten basieren häufig auf der Kombination der Hooks
useEffect
unduseState
. Diese Hooks arbeiten Hand in Hand, um Zustand und Nebeneffekte innerhalb von Komponenten zu verwalten.
Beispiel 1:
Wir erstellen die Komponente Articles
, die den useEffect
-Hook verwendet, um Daten dem Zustand articles
zuzuweisen. Dies ist eine ausgezeichnete Gelegenheit, die leistungsstarke Kombination der React-Hooks zu erkunden.
import { useEffect, useState } from "react";
import fetchData from "../service/api";
const Articles = () => {
const [articles, setArticles] = useState([]);
useEffect(() => {
fetchData()
.then((resp) => {
setArticles(resp.jokes);
})
.catch((error) => {
console.error(error);
});
}, []);
return (
// Render some markup based on the articles data
);
};
In dieser Komponente nutzen wir den useEffect
-Hook, um sicherzustellen, dass der Zustand articles
mit Daten befüllt wird. Wie zuvor erwähnt, wird die Funktion useEffect
nach jedem Rendern ausgeführt, wodurch garantiert wird, dass dem Benutzer Daten angezeigt werden, sofern diese abgerufen wurden. Dies gewährleistet eine nahtlose Benutzererfahrung mit stets aktuellen Inhalten.
Zeilenweise Erklärung:
- Zeile 1: Import der Hooks
useEffect
unduseState
aus der React-Bibliothek, um deren Funktionalität zu nutzen; - Zeile 2: Import der Funktion
fetchData
aus "../service/api". Diese Funktion ist für das Ausführen einer API-Anfrage und das Abrufen von Daten zuständig; - Zeile 4: Die Komponente
Articles
wird mit der üblichen Funktionssyntax definiert; - Zeile 5: Initialisierung des Zustands mit dem Hook
useState
, der den Anfangswert der Variablearticles
darstellt. In diesem Beispiel ist es ein leeres Array; - Zeilen 7-15: Der eigentliche Anwendungsfall des
useEffect
-Hooks;- Zeile 7 und Zeile 15: Dies ist die Syntax. So wird der Hook verwendet;
- Zeile 8: Die Funktion
fetchData
wird aufgerufen. Diese Funktion soll eine API-Anfrage ausführen und ein Promise zurückgeben; - Zeilen 9-11: Wenn das Promise aufgelöst wird (
then
-Block), wird einresp
-Objekt empfangen. Die Daten werden ausresp
mitresp.jokes
extrahiert und mitsetArticles
im Zustandarticles
gespeichert; - Zeilen 12-14: Falls während der API-Anfrage ein Fehler auftritt (im
catch
-Block), wird dieser mitconsole.error
in der Konsole protokolliert.
- Zeilen 17-19: Das Markup der Komponente wird gerendert.
Vollständiger App-Code:
Beispiel 2:
Wir erstellen die Komponente Counter
, um einen counter
-Wert zu verfolgen. Die Aufgabe besteht darin, den Wert der Variablen counter
jedes Mal zu protokollieren, wenn er sich ändert. Dafür verwenden wir den useEffect
-Hook mit einem Abhängigkeitsarray, das die Variable counter
enthält.
import React, { useState, useEffect } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Count has changed:", count);
}, [count]);
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
};
Zeilenweise Erklärung:
- Zeile 1: Import der Hooks
useEffect
unduseState
aus der React-Bibliothek zur Nutzung ihrer Funktionalität; - Zeile 3: Die übliche Funktionssyntax definiert die Komponente "Counter";
- Zeile 4: Initialisierung des States mit dem
useState
-Hook, der den Anfangswert der Variablencount
repräsentiert. In diesem Beispiel ist es0
; - Zeilen 6-8: Die eigentliche Verwendung des
useEffect
-Hooks;- Zeile 7: Diese Logik wird ausgeführt, wann immer sich der Wert im Abhängigkeitsarray ändert. In diesem Fall ist es die Variable
count
; - Zeile 8: Abhängigkeitsarray. Wir teilen React mit, dass beim Ändern des Wertes der Variablen
count
der Code innerhalb der Funktion desuseEffect
-Hooks ausgeführt werden soll.
- Zeile 7: Diese Logik wird ausgeführt, wann immer sich der Wert im Abhängigkeitsarray ändert. In diesem Fall ist es die Variable
- Zeilen 14-19: Das Markup der Komponente wird gerendert.
Vollständiger App-Code:
Bitte nehmen Sie sich einen Moment Zeit, um die Konsole zu überprüfen und die Ausführungslogik der Pfeilfunktion innerhalb des useEffect
-Hooks zu beobachten. Die Pfeilfunktion wird zunächst beim ersten Rendern ausgeführt und anschließend jedes Mal erneut aufgerufen, wenn sich der Wert der Variablen counter
ändert. Sie können dieses Verhalten anhand der entsprechenden Protokolle in der Konsole nachvollziehen.
1. Was ist der Zweck des useEffect
-Hooks in React?
2. Was sind die zwei Hauptargumente, die der useEffect
-Hook entgegennimmt?
Danke für Ihr Feedback!