React-Hooks erschienen in Version 16.7.0 alpha und sind Funktionen, die es ermöglichen, die gesamte Funktionalität von React-Klassen in funktionalen Komponenten zu verwenden. Dank der Hooks können wir eine React-Anwendung entwickeln, die nur aus funktionalen Komponenten besteht. Es ist jedoch interessant festzustellen, dass funktionale Komponenten, die Hooks verwenden, vollständig kompatibel mit React-Klassen sind.
Wenn Sie in Ihrer Anwendung zu Hooks wechseln möchten, können Sie dies im laufenden Betrieb tun, ohne den Rest Ihrer Anwendung zu beschädigen. Diese Hooks ermöglichen es unter anderem, den Zustand und die Lebenszyklusmethoden einer React-Klasse zu ersetzen. Da dies keine Klassen sind, ist das Schlüsselwort „this“ in Ihrem Code nicht mehr relevant.
Bei der Verwendung von Hooks sind zwei Regeln zu beachten:
- Hooks werden auf der obersten Ebene einer Komponente aufgerufen. Das heißt, Sie können sie nicht von einer Funktion oder Unterfunktion aufrufen.
- Hooks werden nur in funktionalen Komponenten aufgerufen. Sie werden nicht in einem Klassenzimmer arbeiten.
Um Ihnen zu helfen und Sie bei Ihren Entwicklungen zu führen, können Sie den ESlint-Linter dank der folgenden Regel verwenden: eslint-Plugin-React-Hooks.
#1 UseState
useState ist der erste Haken, den wir entdecken werden. Es erlaubt, den berühmten Zustand einer React-Klasse zu ersetzen. Es wird mit seinem Setter in einer Zeile definiert:
was haben wir hier gemacht ?
Die useState-Funktion gibt ein Array zurück. Diese Funktion nimmt als Parameter den gewünschten Anfangswert.
Das erste Element des Arrays (Name) ist eine Variable, die Zugriff auf den Zustandswert (hier UX-Republic) gibt.
Das zweite Element (setName) ist eine Funktion, die den Status der Komponente aktualisiert, um die neuen Werte im DOM zu haben.
Das folgende Beispiel zeigt die Umwandlung einer React-Klasse in eine funktionale Komponente mithilfe des useState-Hooks:
Schauen wir uns den Code an :
Der Konstruktor wird nicht mehr benötigt, die Definition des Variablennamens und seines Setters im useState ersetzt ihn. Wir finden 'this' auch nicht mehr im Code, um auf Komponentendaten zuzugreifen.
Um schließlich den Wert von 'name' zu ändern, reicht es aus, den im useState definierten setName aufzurufen, auch hier ist weniger Code notwendig als bei den React-Klassen.
UseState ist wahrscheinlich der einfachste Hook, den React anbietet.
#2 UseEffect
UseEffect ist der zweite Haken, den wir in diesem Artikel behandeln.Es ermöglicht Ihnen, die Lebenszyklusmethoden einer React-Klasse zu überschreiben.
Innerhalb einer Klasse werden Lebenszyklusmethoden (wie der Name schon sagt) in Phasen des Komponentenlebenszyklus ausgelöst. Der Haken useEffekt wird hauptsächlich durch Daten ausgelöst, die an diese Komponente gesendet werden.
Die React-Klasse erfordert, dass wir ihre Methoden verwenden.
Manchmal finden sich jedoch unterschiedliche Geschäftslogiken einer Komponente in derselben Methode, wie beispielsweise „componentWillReceiveProps“. Dies erschwert das Verständnis der Methoden.
UseEffect bietet die Möglichkeit, Geschäftslogik zu trennen, und macht eine Komponente leichter lesbar. Wie macht er das? Sie können beliebig viele useEffect-Methoden in einer Komponente erstellen. Wir werden darauf nach einigen Beispielen zurückkommen.
#3 Grundlegende VerwendungEffekt
In einem ersten Beispiel werden wir sehen, wie useEffect in einer einfachen Komponente verwendet wird, die den Titel der Seite ändert, wenn auf eine Schaltfläche geklickt wird. So würde eine React-Klasse aussehen, die dies tut.
wird
Wir sehen, dass die Verwendung von useEffect die Komponente vereinfacht und die beiden Lebenszyklusmethoden ersetzt. Diese Methode wird aufgerufen, wenn die Komponente initiiert wird. Außerdem wird bei jeder Aktualisierung der Komponente die useEffect-Methode aufgerufen. Der Lebenszyklus des Bauteils interessiert uns hier eigentlich nicht mehr. Es wird nur gesagt, dass bei jedem Update die useEffect-Methode übergeben werden muss.
#4 useEffect mit Cleanup-Effekt
Wir werden jetzt den Cleanup-Effekt entdecken. Es ist eine Funktionalität von useEffect, die es ermöglicht, eine Aktion auszuführen, wenn die Komponente unmounten. Fügen Sie dazu einfach eine Rückgabe einer Funktion hinzu, die Sie wann ausführen möchtenunmounten im useEffect.
Hier ist ein Beispiel :
Wir sehen in diesen Codezeilen, dass wir bei der Initialisierung der Komponente den Status eines Freundes über die ChatAPI abonnieren, um zu wissen, ob er online ist oder nicht. Dieses Ergebnis geben wir mit der Methode zurück handleStatusChange und wir rendern es im Render. Um ein Speicherleck zu vermeiden, wannunmounten der Komponente, wir abmelden zum Status unseres Freundes über die ChatAPI.
Der Cleanup-Effekt kann uns hier helfen, diesen Code mit useEffect zu vereinfachen :
Hier verschieben wir die Funktion handleStatusChange im useEffect, da es nicht außerhalb seines Gültigkeitsbereichs verwendet wird. Wir unterzeichnen die Satzung als während der KomponenteDidMount. Schließlich haben wir in der Rückgabe eine Funktion hinzugefügt Aufräumarbeiten in dem wir abmelden des Status unseres Freundes. Wieder gewinnen wir an Ort und Stelle und die gesamte Logik ist an derselben Stelle gruppiert.
#5 Nutzen Sie den useEffect gut
Hier sind einige Tipps zur Verwendung des useEffect von React Hooks :
- es ist besser zuVerwenden Sie mehrere useEffect, um die Logik zu trennen und den Code besser lesbar zu machen. Es ist interessant festzustellen, dass die useEffects in der Reihenfolge gestartet werden, in der sie geschrieben wurden.
- Die Leistung kann durch Passing-Effekte optimiert werden. useEffect wird jedes Mal gestartet, wenn die Komponente aktualisiert wird.
Manchmal werden Sie den useEffect nur dann übergeben wollen, wenn sich bestimmte Werte in Ihrer Komponente ändern. Anstatt if-Schleifen in der useEffect-Funktion zu verwenden, um die Aktualisierung bestimmter Variablen zu testen, können Sie als zweites Argument an useEffect ein Array mit den zu beobachtenden Variablen übergeben. Sobald sich eine dieser Variablen ändert, wird die Funktion useEffect aufgerufen.
Hier ist ein Beispiel :
Hier haben wir eine if-Schleife, die wir nicht zu den Hooks transponieren wollen.
Dieses Array, das als Parameter von useEffect übergeben wird, enthält die Daten, auf die es lauscht, um seinen Code zu starten. Wenn sich diese Daten ändern, führt es seinen Code aus, andernfalls tut es nichts. Sie können es als willReceiveProps-Methode sehen, die bestimmten Requisiten gewidmet ist. Im obigen Beispiel wird der Dokumenttitel aktualisiert, wenn zählen Wert ändert.
Zu Ihrer Information können Sie useEffect ein leeres Array übergeben, in diesem Fall wird der Code nur ausgeführt, wenn die Komponente erstellt wird, und wird bei Aktualisierungen dieser Komponente nicht darauf zurückgreifen.
Weitere Infos
Wenn Sie möchten, können Sie Ihre eigenen Haken erstellen. Nichts könnte einfacher sein, definieren Sie einfach eine Funktion, deren Name mit „use“ beginnt und die React-Hooks verwendet. Es gibt bereits viele benutzerdefinierte Hooks auf Github.
Wenn wir bei der Verwendung von useState feststellen, dass die Initialisierungsmethode der Variablen lange dauert, können wir einfach eine verzögerte Initialisierung durchführen. Das heißt, seine Variable asynchron initialisieren.
Denken Sie daran, dass useState den Standardwert einer Variablen als Parameter verwendet. Wir können die Initialisierung der im useState definierten Variable bis zu dem Moment verzögern, in dem wir sie wirklich brauchen, indem wir eine Funktion als Parameter des useState übergeben.
Hier ist eine Beispielimplementierung :
Hier erfolgt die Initialisierung von „value“ asynchron und wirkt sich nicht auf die Anzeigegeschwindigkeit des Rests der Seite aus.
Fazit
Mit Hooks können Sie React-Klassen, das Schlüsselwort this und alle Zeilen entfernen, die zum Erstellen einer Komponente erforderlich sind (der Konstruktor, das Binden von Funktionen usw.). Sie können die verschiedenen Logiken, die an derselben Komponente beteiligt sind, isolieren und ihre Lesbarkeit verbessern.
Mit benutzerdefinierten Hooks können Sie eine Komponente in mehr Funktionen aufteilen als mit Klassen.
Es ist auch einfacher, unsere Komponente zu testen, da die zu testende Logik lokalisiert und leichter verständlich ist (weil sie nicht mit anderer Logik durchsetzt ist).
Darüber hinaus können Sie mit dieser Aufschlüsselung jedes Teil problemlos testen, ohne Auswirkungen auf die anderen Funktionen befürchten zu müssen.
Ich persönlich finde es logischer, Ihr Bauteil danach zu denken, was es als Requisiten erhält, als nach einem Lebenszyklus. Jede Komponente kann optimiert werden, indem bestimmte Hooks vermieden werden.
Insgesamt benötigen wir weniger Codezeilen, um das gleiche Ergebnis zu erzielen, während der Code gut lesbar bleibt.
Biblio :
https://reactjs.org/docs/hooks-intro.html
https://putaindecode.io/fr/articles/js/react/react-hooks/
https://medium.com/@dan_abramov/making-sense-of-react-h ooks-fdbde8803889
https://medium.freecodecamp.org/an-introduction-to-react-hooks-12843fcd2fd9
https://codeburst.io/react-hooks-in-5-minutes-1180f1aa0449
https://blog.bitsrc.io/understanding-react-hooks-usestate-6627120614ab
Valentin Dupetitpre, JS Handwerker @UX-Republic
