8 weitere React-Hooks, die Sie kennen müssen

Jan 20, 2024

Von Matthew Tyson

Softwarearchitekt, InfoWorld |

React bleibt der Schrittmacher unter den JavaScript-UI-Frameworks. Es gibt viele Weiterentwicklungen in React, aber die wichtigste Veränderung der letzten Jahre war die Umstellung auf funktionale Komponenten. Funktionskomponenten sind für viele ihrer Funktionen auf Hooks angewiesen. Der häufigste Hook ist useState, aber es gibt noch viele andere.

Hier ist ein Blick auf acht nützliche React-Hooks, die Sie vielleicht noch nicht kennen, und wie man sie verwendet.

Jeder kennt useState, weil es ein wesentliches Merkmal klassenbasierter Komponenten – die Mitgliedsvariablen zum Halten des Status – durch ein funktionales Äquivalent ersetzt. Der useReducer-Hook bewirkt etwas Ähnliches, jedoch für komplexere Szenarien, in denen Zustandsübergänge stärker involviert sind und die Anwendung davon profitiert, Übergänge explizit zu machen. Der useReducer-Hook ist von den Reduzierern in Redux inspiriert. Es kann als Mittelweg zwischen der Einfachheit von useState und der Komplexität eines Zustandsverwaltungssystems wie Redux angesehen werden.

Hier ist ein Beispiel für die Arbeit mit dem useReducer-Hook. Sie können den Reduzierer auch live in dieser JSFiddle sehen.

Der Zweck dieses Beispiels besteht darin, den Text aus dem Eingabefeld zu übernehmen und dem Benutzer die Möglichkeit zu geben, auf Schaltflächen zu klicken, um den Text ausschließlich in Groß- oder Kleinbuchstaben anzuzeigen. Der Code deklariert einen neuen Reduzierer mit const [state, Dispatch] = useReducer(reducer, initialState);. Der useReducer übernimmt die Reducer-Funktion und den Initialstate und gibt ein Array zurück, das wir dann in State- und Dispatch-Variablen zerlegen.

Der Reduzierer selbst ist definiert mit: const Reducer = (Zustand, Aktion) =>, was eine Funktion mit zwei Argumenten ergibt. Immer wenn die Dispatch-Funktion im Code aufgerufen wird, übergibt sie den aktuellen Status zusammen mit einem Aktionsobjekt. In diesem Fall verfügt das Aktionsobjekt über ein Typfeld und wir verwenden dieses, um zu bestimmen, wie der Zustand geändert werden soll.

In einer mäßig komplexen Anwendung kann useReducer bei der Verwaltung der Komplexität hilfreich sein und kann mithilfe des Kontexts sogar in der gesamten Anwendung gemeinsam genutzt werden. Wenn useState aufgrund der Komplexität der Anwendung schwierig zu verwalten ist, kann der useReducer-Hook hilfreich sein.

Der useCallback-Hook ist ein Performance-Hook. Es übernimmt eine Funktion und stellt sicher, dass nur eine einzige Version zurückgegeben und für alle Aufrufer wiederverwendet wird. Wenn die Funktion teuer ist und wiederholt von einer Schleife oder untergeordneten Komponenten aufgerufen wird, kann der useCallback-Hook zu erheblichen Leistungssteigerungen führen. Diese Art der Optimierung wird als Memoisieren einer Funktion bezeichnet.

In Listing 2 sehen wir ein Beispiel für die Verwendung von useCallback, um dieselbe Funktion für viele Elemente in einer Liste zu verwenden. Hier ist das Beispiel in einem Live-JSFiddle.

Wir verwenden React.useCallback(), um eine neue gespeicherte Funktion bei incrementCounter zu erstellen. Wir können die gespeicherte Funktion als normale Funktion im onClick-Handler in der Liste verwenden. useCallback() akzeptiert eine Funktion als erstes Argument. Innerhalb dieser Funktion können wir jede Arbeit ausführen, die wir benötigen. Der Hauptunterschied besteht darin, dass React einfach den zwischengespeicherten Wert der Funktion zurückgibt, es sei denn, in der Liste der Abhängigkeitsvariablen, in unserem Beispiel der Zählervariablen, hat sich etwas geändert.

Dies ist eine wertvolle magische Kraft in Fällen, in denen Sie eine teure Funktion mit mehreren Anrufern teilen müssen, insbesondere mit untergeordneten Komponenten. Bedenken Sie beim Betrachten des nächsten Hooks (useMemo), dass useCallback die Funktion selbst speichert. Das heißt, useCallback verhindert, dass die eigentliche Funktion bei jedem Erscheinen neu erstellt wird, und erstellt sie nur bei Bedarf neu.

Der useMemo-Hook ist der Bruder von useCallback. Während useCallback die Funktion zwischenspeichert, speichert useMemo den Rückgabewert der Funktion zwischen. Es ist ein subtiler, aber wichtiger Unterschied.

Wann sollten Sie useMemo im Vergleich zu useCallback verwenden? Die Antwort lautet: Verwenden Sie useMemo, wenn Sie können, und useCallback, wenn Sie müssen. Der useCallback-Hook ist sinnvoll, wenn der Leistungseinbruch, den Sie vermeiden möchten, die Erstellung der Funktion selbst im Rendering ist, während useMemo nicht verhindert, dass die Funktion überall dort neu erstellt wird, wo sie erscheint. Allerdings stellt useMemo sicher, dass die Funktion einen zwischengespeicherten Wert zurückgibt, wenn sich die Abhängigkeiten nicht geändert haben.

Listing 3 zeigt useMemo in einem Beispiel. ,Sie können dieses Beispiel auch in einem Live-JSFiddle sehen.

In diesem Beispiel haben wir eine Funktion, deren Berechnung viel kostet: „computeExpensiveValue“. Es hängt von einer einzigen Eingabe ab, der Anzahl. Wir können „computeExpensiveValue(count), [count]) verwenden, um der Reaktion mitzuteilen: Führen Sie diese Funktion nur aus, wenn sich die Anzahl geändert hat. Andernfalls wird die zwischengespeicherte Berechnung zurückgegeben.

Auch hier ist der Unterschied zu useCallback nicht offensichtlich. Der wichtige Unterschied ist: useCallback ist der Hook, der verwendet werden soll, wenn die Funktion selbst wiederholt instanziiert wird, was zu einem Leistungseinbruch führt. Ansonsten ist useMemo die bessere Wahl.

In React ist der Kontext ein Variablenbereich, der außerhalb der Komponenten existiert und auf den alle Komponenten Zugriff haben. Somit handelt es sich um einen schnellen und einfachen globalen Raum für anwendungsweite Daten. Für komplexe Szenarien ist es möglicherweise besser, einen offiziellen Datenspeicher wie Redux zu verwenden, aber für viele Anwendungen reicht der Kontext aus. Der useContext-Hook bestimmt, wie funktionale Komponenten mit dem Kontext interagieren.

In Listing 4 haben wir zwei Komponenten, Speak und Happy, die von der übergeordneten Anwendungskomponente App verwendet werden. Der Benutzer kann zwischen einem Hunde- und einem Katzenzustand wechseln und über den globalen Kontext spiegeln die untergeordneten Komponenten die Wahl wider (z. B. Schwanzwedeln oder Schnurren). Sie können sich für dieses Beispiel auch die Live-JSFiddle ansehen.

Mit dem useRef-Hook können Sie eine Referenz außerhalb des Renderzyklus verwalten. useState bewirkt, dass die React-Engine rendert, wenn sie sich ändert, useRef dagegen nicht. Der useRef-Hook ist wie ein spezieller Bereich neben React, der besagt: Diese Variable ist etwas Besonderes und nicht Teil der reaktiven Benutzeroberfläche. Der häufigste Anwendungsfall für useRef besteht darin, direkten Zugriff auf das DOM und seine API zu erhalten. Normalerweise wird dies beim reaktiven Denken vermieden und alles sollte durch die reaktive Engine erledigt werden, aber manchmal ist es unvermeidlich.

Wenn in Listing 5 auf die Schaltfläche geklickt wird, verwenden wir den useRef-Hook, um einen Verweis auf das Eingabefeld zu speichern, und verwenden die DOM-Methoden, um den Fokus darauf zu legen und seinen Wert auf „Etwas Erstaunliches“ zu setzen. Hier ist die JSFiddle für useRef-Beispiel.

useEffect ist nach useState der zweithäufigste Hook. Es wird häufig verwendet, um API-Aufrufe durchzuführen, das DOM zu ändern oder andere Maßnahmen zu ergreifen (d. h. einen Effekt hervorzurufen), wenn sich etwas am Komponentenstatus ändert. In gewisser Weise können Sie mit useEffect eine oder mehrere reaktive Variablen und das für sie auftretende Verhalten definieren.

In Listing 6 definieren wir eine Dropdown-Liste zur Auswahl eines Star Wars-Charakters. Wenn sich dieser Wert ändert, führen wir einen API-Aufruf an die Star Wars-API (SWAPI) durch und zeigen die Daten des Charakters an. Hier ist die Live-JSFiddle für dieses Beispiel.

useLayoutEffect ist ein weniger bekannter Hook, der ins Spiel kommt, wenn Sie Messungen des gerenderten DOM durchführen müssen. Der useLayoutEffect-Hook wird aufgerufen, nachdem React die Benutzeroberfläche gezeichnet hat, sodass Sie sich darauf verlassen können, dass er Zugriff auf das tatsächliche Layout bietet.

In Listing 7 verwenden wir useRef, um ein Element aus dem DOM zu holen und useLayoutEffect, um benachrichtigt zu werden, wenn das Rendern abgeschlossen ist. Anschließend berechnen wir die Elementgröße mithilfe der DOM-API. Sehen Sie sich für dieses Beispiel auch die JSFiddle an.

Manchmal müssen Sie den Verweis direkt auf eine Komponente abrufen. Sie können dies mit useRef tun, und wenn Sie auch Zugriff auf das DOM der Komponente gewähren möchten, können Sie forwardRef verwenden. Manchmal müssen Sie jedoch das Verhalten anpassen, das die Komponente über die Referenz bereitstellt. Dazu benötigen Sie den useImperativeHandle-Hook.