useState()
, useEffect()
und useContext()
verwenden. this.state.value
auslesen und haben darunter einen Button, mit dem wir den Wert erhöhen können. Dazu rufen wir this.setState()
auf und setzen den neuen value
auf den vorherigen Wert, den wir um 1 erhöhen.useState()
-Hook:state
-Objekt mehr und auch kein this
, über das wir auf den State zugreifen. Stattdessen sehen wir hier den Aufruf des internen useState()
-Hooks. Dieser funktioniert so, dass er einen Initialwert übergeben bekommt (hier: 0
) und einen Tupel zurückgibt, also ein Array mit der gleichen Anzahl von Werten. Im Falle des useState()
-Hooks sind das zum einen der aktuelle State, zum anderen eine Setter-Funktion, mit der wir den Wert modifizieren können.value
, der zweite Wert in die Variable setValue
geschrieben wird. Beide Namen sind dabei frei wählbar, es hat sich jedoch schnell eingebürgert, dem State einen kurzen, prägnanten Namen zu geben und der Setter-Funktion den gleichen Namen zu geben mit einem Verb wie etwa set
, change
oder update
davor. Die Syntax ist also eine Abkürzung für das folgende ES5 Äquivalent:Counter
-Komponente zurückgeben, greifen wir nun direkt auf value
statt auf this.state.value
zu und setzen den neuen Wert mittels eines sehr kurzen setValue(value + 1)
statt wie zuvor in der Klassen-Komponente mittels this.setState((state) => ({ value: state + 1 }))
. useState()
. Dazu haben wir die Methode React.useState()
aufgerufen. Hooks können auch direkt aus dem react
-Package importiert werden. useState()
nutzen, statt jedesmal React.useState()
schreiben zu müssen.useReducer()
-Hooks. Dieser wurde eingeführt um die Verwaltung komplexer States zu vereinfachen.useEffect()
-Hook erhält seinen Namen daher, dass dieser dazu vorgesehen ist, ihn für Side Effects zu benutzen. Also Seiteneffekte wie das Laden von Daten via API, das Registrieren von globalen Events oder die Manipulation von DOM-Elementen. Der Hook bildet die Funktionalität der componentDidMount()
, componentDidUpdate()
und componentWillUnmount()
-Lifecycle Methoden ab.useEffect()
-Hook vorgesehen sind.useEffect()
-Funktion selbst eine Funktion als erster Parameter übergeben. Diese Funktion, nennen wir sie der Einfachheit halber „Effekt-Funktion“, wird von React grundsätzlich erst einmal nach jedem Rendering der Komponente ausgeführt und tritt damit an die Stelle von componentDidUpdate()
in Klassen-Komponenten.componentDidMount()
Lifecycle-Methode aus den Klassen-Komponenten. componentWillUnmount()
. useEffect()
-Hook als zweiter Parameter ein Array mit sog. Dependencies übergeben wird. Dabei handelt es sich um Werte, von denen die Ausführung der Effekt-Funktion abhängt. Wird ein Dependency-Array übergeben, wird der Hook nur einmal initial ausgeführt und dann erst wieder, wenn sich mind. einer der Werte im Dependency-Array geändert hat.componentDidMount()
simulieren, kann ein leeres Array als zweiter Parameter übergeben werden. React führt die Effekt-Funktion dann nur beim ersten Rendern aus und ruft erst beim Unmounting wieder eine eventuell definierte Aufräum-Funktion auf.useState()
-Hook.useEffect()
-Hooks können wir hier die Komplexität verringern, da die Komponente nicht viele, zum Teil sehr ähnliche Dinge an mehreren Stellen innerhalb der Komponente ausführen muss, sondern sich alle für die Komponente relevanten Lifecycle-Events in nur einer einzigen Funktion, eben dem Hook, abspielen.useEffect()
-Hook mit einer Klassen-Komponente implementiert werden würde:document.title
in eine eigene Klassen-Methode wie etwa setDocumentTitle()
auslagert, das sind allerdings Details, die an der höheren Komplexität der Klassen-Komponente im direkten Vergleich mit Hooks nicht wirklich etwas ändern. componentDidMount()
und componentDidUpdate()
) aufgerufen werden. Zusätzlich hätten wir eine weitere Klassen-Methode, die die Klasse nur noch weiter aufbläht und so die Duplikation nur zu Lasten einer Abstraktion auflöst.useContext()
. Mit ihm wird es ein Kinderspiel, Daten aus einem Context-Provider zu konsumieren, ohne dass dazu umständlich eine Provider-Komponente mit einer Function as a Child verwendet werden muss. useContext()
-Hook einen mittels React.createContext()
erzeugten Context übergeben und gibt dann den Wert des in der Komponenten-Hierarchie nächsthöheren Providers zurück. Wird der Wert des Contexts im Provider geändert, löst der useContext()
-Hook ein Rerendering mit den aktualisierten Daten aus dem Provider aus. Damit ist über die Funktionsweise auch schon alles gesagt. ContextExample
-Komponente Daten (in diesem Beispiel Pseudo-Account-Daten) aus dem AccountContext
-Provider verwendet, ohne dass dafür alles von einer AccountContext.Consumer
-Komponente umschlossen sein muss. Dies spart nicht nur einige Zeilen Code in der Komponente selbst, sondern führt auch in der Debug-Ansicht zu einem deutlich übersichtlicheren Baum, da die Verschachtelungstiefe flacher ist.