Wenn Sie ein React-Entwickler sind, der noch nichts über React-Hooks gelernt hat, ist jetzt der richtige Moment. Dieser Beitrag wird den useEffect React Hook im Detail durchgehen. Es ist das Hakenäquivalent eines Schweizer Taschenmessers. Es löst eine Vielzahl von Problemen, z. B. wie man Daten erhält, wenn eine Komponente gemountet wird, wie man Code ausführt, wenn sich ein Status oder eine Requisite ändert, wie man Timer oder Intervalle einrichtet und so weiter.
Ein useEffect wird für so ziemlich alles verwendet, was Sie in einer React-Komponente „tun“ möchten, die kein JSX zurückgibt (jede Art von Nebeneffekt). Sie können auch mehrere useEffects pro Komponente haben.
All diese Leistung hat ihren Preis: Wenn Sie nicht verstehen, wie sie funktioniert, kann sie verwirrend sein. In diesem Beitrag sehen wir uns eine Vielzahl von Beispielen an, damit Sie das konzeptionelle Modell verstehen und auf Ihren eigenen Code anwenden können.
Haken reagieren – Was versucht es zu lösen?
Hooks wurden erstmals in React Version 16.8 eingeführt und werden jetzt von vielen React-Projekten verwendet. Hooks überwindet das Problem der Codewiederholung zwischen Komponenten. Sie werden ohne die Verwendung von Klassen geschrieben. Dies bedeutet nicht, dass React den Unterricht aufgibt; Haken sind einfach eine alternative Methode.
Mit React können Sie schnell anspruchsvolle Komponenten mit zustandsbehafteter Logik erstellen. Es ist schwierig, diese Komponenten zu trennen, da die Klasse auf React Lifecycle Methods beruht. Hier kommen React Hooks ins Spiel.
Sie ermöglichen es Ihnen, eine Komponente in kleinere Funktionen zu unterteilen. Anstatt Code basierend auf Lifecycle-Methoden in kleinere Teile zu unterteilen, können Sie Code jetzt je nach Funktionalität in kleinere Einheiten anordnen und trennen.
Was ist useEffect Hook?
Hooks sind Funktionen, mit denen Sie auf Status- und andere Reaktionsfunktionen zugreifen können, ohne ES6-Klassen schreiben zu müssen. Die React-Hooks-API hat einen Hook namens useEffect. Wenn Sie mit Reaktionslebenszyklen vertraut sind, ist der useEffect-Hook derselbe wie der KomponenteDidMount, KomponenteDidUpdate und KomponenteWillUnmount Lebenszyklusmethoden kombiniert.
Laut der React Hooks-Dokumentation wurde es erstellt, um einige der Probleme mit Lebenszyklusmethoden für Komponenten der ES6-Klasse zu lösen.
Syntax
Das erste Argument ist eine Callback-Funktion, die standardmäßig nach jedem Rendern ausgeführt wird. Der zweite Parameter ist ein optionales Dependency-Array, das den Hook anweist, nur dann zurückzurufen, wenn sich der Zielzustand ändert.
Der Hook vergleicht die historischen und aktuellen Zustände jeder Abhängigkeit. Wenn die beiden Werte nicht übereinstimmen, ruft der Hook den im ersten Parameter angegebenen Rückruf auf. Abhängigkeitsarrays ändern das übliche Callback-Verhalten und garantieren, dass der Hook alle anderen Komponenten im Komponentenbereich ignoriert.
Grundsätzliche Verwendung
Um eine Nachricht zu speichern, verwende ich React useState im obigen Codebeispiel. Danach nehme ich meine Nachrichtenstatusvariable und drucke sie auf dem Bildschirm aus. Ich möchte jetzt jedoch Effect verwenden, um die Nachricht eine Sekunde nach dem Einhängen der Komponente zu ändern.
Ich habe meinen Effekt hinter der Zeile useState eingefügt, nachdem ich useEffect aus dem React-Framework importiert habe. Der erste Parameter von useEffect ist eine Funktion. Wenn dieser Funktionshandler ausgeführt wird, kümmert er sich um alle von Ihnen bereitgestellten Nebenwirkungen. Die Funktion ist eine Rückruffunktion, die aufgerufen wird, wenn eines der Lebenszyklusereignisse der React-Komponente eintritt.
Wann soll man es benutzen?
Der Hook useEffect kann in einer Vielzahl von Situationen nützlich sein. Die folgenden sind die wichtigsten:
- Wir können diesen Parameter von der Clientseite aus ändern, wenn wir Daten abhängig von einem bereitgestellten Argument abrufen möchten. Es wird aufgerufen, nachdem der Parameter mit neuen Daten aktualisiert wurde.
- Wenn wir Daten von einem API-Endpunkt abrufen und auf der Clientseite anzeigen möchten. Wenn unsere Komponente rendert, wird die Funktion oder der Handler, der dem useEffect-Hook übergeben wird, ausgeführt, und Daten in den Komponentenzuständen werden abgerufen. Diese Status werden dann in Benutzerschnittstellenkomponenten verwendet.
- Wenn Ihre Komponente auf Daten von der Außenwelt angewiesen ist und wir nicht sicherstellen können, dass Daten ankommen, sollten wir Effect verwenden (möglicherweise ist der Server dort unten). Anstatt Probleme zu werfen und zu verhindern, dass andere Komponenten angezeigt werden, platzieren Sie sie im useEffect-Hook.
Anwendungsszenarien
Wenn die Komponente nach der ersten Ausführung erneut gerendert wird, wird sie nicht ausgeführt.
Wenn eine Komponente gerendert oder erneut gerendert wird, sollte sie immer ausgeführt werden.
Standardmäßig wird das Programm nur einmal ausgeführt. Führen Sie danach, wenn sich die Prop-Werte ändern, Folgendes aus:
Verwenden Sie für asynchrone Aktivitäten immer useEffect.
useEffect-Codeblöcke sind offensichtliche Markierungen asynchroner Jobs für Ihre Mitentwickler. Es ist möglich, asynchronen Code ohne useEffect zu erstellen, aber dies ist nicht die „React-Methode“ und erhöht sowohl die Komplexität als auch das Fehlerrisiko.
Die Verwendung von useEffect anstelle des Schreibens von asynchronem Code, der die Benutzeroberfläche stoppen kann, ist eine bekannte Technik in der React-Community, insbesondere die Art und Weise, wie das React-Team sie entwickelt hat, um einen Nebeneffekt auszuführen.
Ein weiterer Vorteil der Verwendung besteht darin, dass Entwickler den Code einfach überprüfen und Code sofort erkennen können, der „außerhalb des Kontrollflusses“ ausgeführt wird, was erst nach dem ersten Renderzyklus wichtig wird. Darüber hinaus eignen sich die Blöcke zur Extraktion in wiederverwendbare und noch semantischere benutzerdefinierte Hooks.
Ein Beispiel
Erhöhen Sie mithilfe des useEffect-Codes eine Zahl pro Sekunde.
Zusammenfassung
Das Verständnis der zugrunde liegenden Designprinzipien und Best Practices des useEffect-Hooks ist meiner Ansicht nach eine entscheidende Fähigkeit, die Sie erlernen müssen, wenn Sie ein React-Entwickler der nächsten Stufe werden möchten.
Zusammenfassend erhält der useEffect-Hook eine Funktion, die zwingende, möglicherweise vollständige Wirkungslogik enthält. Das Abhängigkeitsarray, das der zweite Parameter ist, kann verwendet werden, um die Ausführung zu beeinflussen. Während des Umgangs damit ist es auch notwendig, Reinigungscode mit der Return-Funktion zu schreiben.
Lassen Sie uns in den Kommentaren wissen, ob der Artikel hilfreich war.
Hinterlassen Sie uns einen Kommentar