React useEffect() Hook: Verwendung, wie und wann man ihn verwendet

Einführung in den useEffect() Hook

useeffect Hook eine Schlüsselkomponente.Es übernimmt Aufgaben wie das Abrufen von Daten, das Einrichten von Ereignis-Listenern oder das Ändern des DOM und ermöglicht Benutzern die Durchführung von Nebeneffekten mithilfe funktionaler Komponenten. Es steuert auch den Komponentenlebenszyklus.

Deruseeffect-Hook nutzt zwei Argumente, eine Funktion und ein optionales Abhängigkeitsarray.Die als erstes Argument übergebene Funktion wird nach dem ersten Rendern der Komponente und dann erneut nach jeder Aktualisierung ausgeführt. Mithilfe des Abhängigkeitsarrays können Sie die Variablen angeben, von denen ein Effekt abhängt. Eine neue Ausführung des Effekts wird durchgeführt, wenn sich eine der Variablen des Abhängigkeitsarrays ändert.

Grundsätzlich wurde deruseeffect-Hook entwickelt, um die Herausforderungen zu bewältigen, denen sich der Lebenszyklus der Komponenten der ES6-Klasse gegenübersieht.Mittlerweile ist es jedoch zu einem der zentralen Reaktionskonzepte geworden.

Nachdem wir kurz erklärt haben,was in „react“ ein „useeffect“ ist , schauen wir uns nun die Syntax an.

Grundlegende Syntax des useEffect()-Hooks

useEffect unterstützt zwei Argumente ; Das zweite Argument ist optional. Die Syntax ist wie folgt:

useEffect(<Funktion>, <Abhängigkeit>)

Die Funktion beinhaltet die Nebeneffektlogik. Es provoziert die Ausführung eines Callbacks direkt nach dem DOM-Update.

Die Abhängigkeit enthält ein optionales Array von Abhängigkeiten Ihrer Nebeneffekte, z. B. Status- und Requisitenwerte. Beachten Sie, dass derUse-Effect-Hook nur dann einen Rückruf ausführt, wenn sich die Abhängigkeiten während des Renderns geändert haben.

Die Syntax dient ausschließlich dem Zweck von useEffect(). Damit können Sie Ihre Nebeneffektlogik in die Rückruffunktion einfügen und dann mithilfe des Abhängigkeitsarguments steuern, wann der Nebeneffekt ausgeführt werden soll.

Bei der Implementierung des useEffect()-Hooks können Sie die folgende Syntax berücksichtigen:

// useEffect importieren

import { useEffect } aus 'react';

Funktion MyComponent() {

// ruft es über dem zurückgegebenen JSX auf

// übergibt ihm zwei Argumente, nämlich ein Array und eine Funktion

useEffect(() => {

// Effektfunktion

return () => {

// Aufräumfunktion

};

}, [/* Abhängigkeitsarray */]);

// Komponenten-Rendering-Logik

}

}

Schauen Sie sich unserekostenlosen Technologiekursean , um sich von der Konkurrenz abzuheben.

Komponenten mit dem useEffect()-Hook ein- und aushängen

Montage

Die erste Phase des Lebenszyklus einer React-Komponente umfasst das Erstellen und Einfügen von Komponenten in das DOM. Diese Lebenszyklusphase von React UseEffect umfasst die Lebenszyklusmethode „componentDidMount“, die ausgeführt wird, wenn die Komponente bereitgestellt wird.

Hier ist ein Beispiel für das Mounten von Komponenten mit dem useEffect()-Hook.

ComponentDidMount() {

console.log(„Die Komponente wurde erfolgreich gemountet“);

this.setState({

geladen: wahr

})

}

Im obigen Beispiel können Sie mit „componentDidMount“ setState verwenden. So können Sie den Status in der Lebenszyklusmethode einfach festlegen und ändern. Die entsprechende Methode verwendet API-Aufrufe, ruft Remote-Endpunkte auf und ruft Daten ab.

Absteigen

Diese React-UseEffect- Lebenszyklusmethode übernimmt die Bereinigung in einem DOM.Es ist wie eineUseEffect-Bereinigungsfunktion , die eine Komponente aus dem DOM entfernt.In React wird dies als Unmounten bezeichnet. Beim Aufheben der Bereitstellung wird nur eine Lebenszyklusmethode verwendet, nämlich „componentWillUnmount“. Es wird aufgerufen, wenn Sie eine Komponente aus dem DOM entfernen möchten.

ComponentWillUnmount() {

console.log(„Die Komponente wurde erfolgreich ausgehängt“);

}

Verwenden des Hooks „use effect()“ zum Behandeln von Statusänderungen

Der Useeffect wird nach jedem Rendern ausgeführt.Es wird auch verwendet, um bestimmte Codes als Bestätigung einer Statusänderung auszuführen. Sie können die Ausführungszeit des Effekts steuern, indem Sie das zweite Argument im useEffect() Hook übergeben. Das zweite Argument fungiert als Array von Abhängigkeiten, d. h. wenn die entsprechenden Variablen geändert werden, muss der Effekt erneut ausgeführt werden. Beachten Sie, dass der Status einer der Variablentypen ist.

Im folgenden Abschnitt wird anhand eines Beispiels erläutert, wie derUse-Effect-Hook Statusänderungen verarbeitet.

Beispielsweise möchten Sie möglicherweise einen Nebeneffekt basierend auf einem „Tage“-Wert ausführen. Angenommen, Sie haben einen Nebeneffekt, bei dem je nach Wert des Tages eine Begrüßungsnachricht angezeigt wird. Der Wert des Tages wird in einer Zustandsvariablen gespeichert.

Immer wenn Sie einen Tag auswählen, wird der Status aktualisiert. Durch die Änderung des Statuswerts können Sie die Begrüßungsnachricht aktualisieren. Sie sollten die Statusvariable als Teilmenge des Abhängigkeitsarrays an den useEffect-Hook übergeben.

useEffect(() =>

{

// Nebenwirkung

}, [Zustand]);

Im obigen Beispiel von useeffect reagieren native würde der Nebeneffekt ausgeführt, wenn der Wert der Statusvariablen aktualisiert wird.

Entdecken Sie unsere beliebten Software-Engineering-Kurse

Verwendung des useEffect()-Hooks mit APIs und Netzwerkanforderungen

Sie können den Hook „useEffect()“ mit APIs und Netzwerkanfragen verwenden, um Daten von einem Server abzurufen und Fehler zu behandeln. Hier ist ein Beispiel für die Verwendung von „useEffect()“ mit einer API und den Umgang mit Netzwerkfehlern:

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

Funktion MyComponent() {

const [data, setData] = useState(null);

const [error, setError] = useState(null);

useEffect(() => {

asynchrone Funktion fetchData() {

versuchen {

const Antwort = Warten auf fetch('https://api.example.com/data');

if (!response.ok) {

throw new Error('Netzwerkantwort war nicht ok');

}

const json = Warten auf Antwort.json();

setData(json);

} Catch (Fehler) {

setError(error);

}

}

Daten abrufen();

}, []);

if (Fehler) {

return <div>Fehler: {error.message}</div>;

}

if (!data) {

return <div>Loading…</div>;

}

zurückkehren (

<div>

<p>{data.message}</p>

</div>

);

}

Sie können dieses Beispiel ändern, um alle zusätzlichen Funktionen einzuschließen, die Sie zur Verarbeitung von Netzwerkanforderungen und API-Antworten benötigen.

Erweiterte useEffect()-Hook-Techniken

Eine der fortgeschrittenen UseEffect-React-Native- Techniken ist das Auswendiglernen.Es handelt sich um eine Optimierungstechnik, bei der die Ausgabe eines Funktionsaufrufs zwischengespeichert wird. Anschließend gibt dieFunktion „useeffect return“ den Wert zurück, wenn dieselbe Eingabe erneut eingegeben wird.

Eine weitere bekannte useEffect()-Hook-Technik ist der useMemo-Hook. Damit können Sie einen Wert berechnen und ihn sich merken. Seine Syntax ist:

importiere { useMemo } aus 'react'

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

useEffect() Hook-Abhängigkeiten

useEffect() Hook-Abhängigkeiten enthalten eine Liste der Abhängigkeiten Ihres Nebeneffekts und umfassen gleichzeitig Status- oder Requisitenwerte. Mit dem Argument „Abhängigkeiten“ können Sie einige Komponentenlebenszyklusereignisse abfangen, z. B. das Mounten einer Komponente oder die Aktualisierung eines bestimmten Status-/Eigenschaftswerts.

Mit dem Abhängigkeitsargument können Sie den Zeitpunkt steuern, zu dem der Nebeneffekt aufgerufen wird, unabhängig vom Rendering-Zyklus der Komponente.

Bedingtes Rendern mit useEffect() Hook

Mit useEffect Hook können Sie die Bedingungen in den Hook einfügen. Hier ist ein Beispiel.

useEffect(() => {

if (shouldExecute) {

// (Liste der Bedingungen)

}

}, [shouldExecute])

Sie müssen die obligatorischen Bedingungen angeben, die Sie unter der Funktion ShouldExecute ausführen möchten.

Verwenden Sie effect() Hook vs. ComponentDidMount() und ComponentDidUpdate()

useEffect() Hook vs. ComponentDidUpdate():

useEffect() Hook vs. ComponentDidMount():

Häufige Fehler und Best Practices mit dem useEffect() Hook.

Häufige Fehler

1. Keine Abhängigkeiten definieren

useEffect wird immer dann ausgeführt, wenn eine Komponente gerendert wird. Daher müssen Sie die Werte definieren, die ein erneutes Rendern auslösen müssen. Andernfalls kann Ihre useEffect-Funktion zu Leistungsproblemen führen.

2. Keine Bereinigung nach der Ausführung des useEffect-Hooks

useEffect gibt möglicherweise eine Bereinigungsfunktion zurück, die ausgeführt wird, wenn die Bereitstellung der Komponente aufgehoben wird. Wird nach useEffect nicht bereinigt, kann dies zu Speicherverlusten und anderen Problemen führen. Daher ist es wichtig, die Bereinigungsfunktion „useeffect“ zu verwenden .

3. Verwendung von setState in der useEffect-Funktion ohne Abhängigkeit

Wenn Sie den Status in useEffect aktualisieren, wird ein weiteres Rendern ausgelöst. Dies kann zu einer Endlosschleife führen. Um dies zu verhindern, müssen Sie die Statusvariable, die Sie aktualisieren, immer als Abhängigkeit in einem useEffect-Hook definieren.

Entdecken Sie unsere kostenlosen Kurse zur Softwareentwicklung

Empfohlene Vorgehensweise:

• Wenn Sie den useEffect-Hook verwenden möchten, stellen Sie sicher, dass Sie nur einen pro Komponente verwenden. Im Falle mehrerer useEffect-Hooks würden alle ausgeführt, wann immer eine Komponente gerendert wird. Daher kann es zu Leistungsproblemen und unerwartetem Verhalten kommen.
• Stellen Sie sicher, dass Sie den useEffect-Hook nicht innerhalb von Bedingungen, Schleifen oder verschachtelten Funktionen verwenden. Wenn Sie State innerhalb einer for-Schleife verwenden, erstellt React bei jedem Schleifendurchlauf eine neue Statusvariable. Dies führt zu unerwartetem Verhalten.
• Achten Sie darauf, den useEffect-Hook nicht zu häufig zu verwenden. Sie können die Lesbarkeit Ihres Codes erschweren und bei übermäßiger Verwendung die Leistung beeinträchtigen.
• Sie dürfen den useEffect-Hook nur über React-Funktionen aufrufen. Wenn Sie es von einer Klassenkomponente aus aufrufen, wird eine Fehlermeldung angezeigt.

Abschluss

Es ist am besten , useeffect in React zu verwenden, wenn Sie einfach auf die Requisiten und den Status der Komponenten zugreifen möchten, ohne zusätzlichen Code schreiben zu müssen.Es vereinfacht Nebenwirkungen in Komponenten erheblich, da es einfacher ist, Nebenwirkungen auszuführen, wenn sich der Zustand oder die Requisite ändert. Sie können die oben besprochenen Aspekte und Best Practices berücksichtigen, um sicherzustellen, dass Ihre React-Komponenten optimal funktionieren.

Das Erlernen anspruchsvoller Softwareentwicklungsfähigkeiten ist in der heutigen Zeit von entscheidender Bedeutung. Sie können sich diese hochmodernen Fähigkeiten aneignen, indem Sie den Master of Science in Informatik an der LJMU absolvieren . Der Kurs macht Sie zu einem erfahrenen Softwareentwickler, indem er Fähigkeiten wie Java, Python und Spezialisierung in verwandten Bereichen vermittelt. Das gründliche Erlernen der in diesem Kurs behandelten Aspekte hilft Ihnen, Berufsmöglichkeiten wie Javascript-Entwickler, Software-Ingenieur und Backend-Ingenieur zu erkunden.

Neben dem Erlernen von Fähigkeiten in der Softwareentwicklung hilft Ihnen upGrad auch dabei, Ihre Karriere als Full-Stack-Entwickler durch Kurse wie das Executive PG Program in Full Stack Development von IIITB und das Full Stack Software Development Bootcamp voranzutreiben . Diese Programme bieten immersive Lernplattformen, die es Kandidaten ermöglichen, anspruchsvolle Full-Stack-Entwicklungsfähigkeiten zu erwerben und effektiv den Weg zu einer erfolgreichen Karriere zu ebnen!