Hooks
Was sind Hooks?
Hooks sind eine Neuerung von React.js ab der Version 16.8, die es ermöglicht bestimmte Eigenschaften und Methoden von Klassen-Komponenten zu verwenden, ohne Klassen erstellen zu müssen. Klassen-Komponenten haben den Nachteil, das sie schlechter optimiert und minimiert werden können und gegenüber Funktions-Komponenten unzuverlässiger nachgeladen werden. Außerdem können mit Hooks Teile von Komponenten einfacher als bisher extrahiert und unabhängig vom Rest der Komponente getestet oder in anderen Komponenten wiederverwendet werden. Hooks können unabhängig vom bisherigen Code verwendet werden, so dass bereits vorhandener Code bei Bedarf nach und nach um Hooks erweitert werden kann, ohne die bisherige Funktionalität einer Komponente zu beeinträchtigen:
Funktionsweise von Hooks
State-Hook
Mit dem State-Hook „useState“ können in einer Funktions-Komponente Eigenschaften wie bei Klassen-Komponenten mit dem „state“-Objekt verwendet werden. Dazu muss beim Import von React zusätzlich der entsprechende Hook in geschweiften Klammern, d. h. in diesem Fall „{useState}“, angegeben werden. Als nächstes wird eine Array-Konstante mit zwei Elementen mit der Methode „useState()“ initialisiert. Das erste Element im Array ist der Name der entsprechenden Eigenschaft und das zweite Element die Funktion zum Setzen der Eigenschaft. Der Methode „useState(variable)“ kann dabei ein Wert zum Initialisieren der Eigenschaft übergeben werden:
React.js-Dateien:
Ergebnis:
Effect-Hook
Mit dem Effect-Hook „useEffect“ kann der DOM manipuliert werden, was sonst nur in Klassen-Komponenten mit den Methoden „componentDidMount“, „componentDidUpdate“ und „componentWillUnmount“ möglich ist. Die Methode „useEffect“ wird nach jedem Aufruf von „render“ ausgeführt, so dass auf alle durch „render“ erstellten oder veränderten DOM Elemente zugegriffen werden kann:
React.js-Dateien:
Ergebnis:
Benutzerdefinierte Hooks
Mit Hilfe von benutzerdefinierten Hooks kann Funktionalität ausgegliedert und anderen Komponenten zur Verfügung gestellt werden. Benutzerdefinierter Hook sind JavaScript-Funktionen, die mit „use“ starten und vordefinierte Hooks verwenden. Dabei dürfen benutzerdefinierte Hooks, wie alle anderen Hooks, nur auf oberster Ebene verwendet werden, d. h. nicht innerhalb von Unterfunktionen, Schleifen oder anderen Strukturen:
React.js-Dateien:
Ergebnis:
