© Excellent backgrounds/Shutterstock.com
Das neue Hooks API von React im Überblick

Captain Hooks


Die sogenannten „Hooks“ sind bei React eine der spannendsten Neuerungen der letzten Zeit. Sie ermöglichen es, auch in Funktionskomponenten alltägliche Dinge wie lokalen Zustand zu managen und Seiteneffekte durchzuführen, was vorher nur mit Klassenkomponenten möglich war. Im Artikel schauen wir uns an, was es mit React Hooks auf sich hat und was das mit Funktionskomponenten zu tun hat. Wir betrachten einige der Standard-Hooks und sehen, wie eigene Hooks gebaut werden können. Zum Schluss werfen wir einen Blick auf Third-Party-Bibliotheken aus der React-Community und darauf, wie sie das neue Hooks API adaptieren.

React erlaubt im Prinzip zwei Arten von Komponenten: Klassenkomponenten und Funktionskomponenten. Die Namen beziehen sich darauf, wie die Komponenten gebaut werden: Mit Klassen oder mit Funktionen. Für Klassenkomponenten kann bei einem reinem JavaScript-Set-up die mit ECMAScript 2015 eingeführte class-Syntax oder können bei TypeScript dessen Klassendefinitionen genutzt werden. Eine Klassenkomponente erweitert React.Component und muss in jedem Fall eine render-Methode besitzen. Diese render-Methode gibt eine DOM-Repräsentation zurück, die beschreibt, wie die Komponente gerade aussehen soll. Sie wird von React bei Bedarf aufgerufen und dazu genutzt, den tatsächlichen DOM-Baum im Browser entsprechend zu updaten.

Die einfachere, bisher aber auch weniger mächtige Variante sind Funktionskomponenten. Sie bestehen nur aus einer Funktion, die – vergleichbar mit der render-Methode bei Klassenkomponenten – eine DOM-Repräsentation zurückliefern. Um Komponenten zu parametrisieren, werden sogenannte Props benutzt. Bei der Benutzung einer Komponente werden diese Props als Attribute, vergleichbar mit XML-Attributen, am Tag der Komponente gesetzt. Bei Funktionskomponenten werden die Props in Form eines Objekts als Parameter an die Funktion übergeben. Bei Klassenkomponenten kann auf Props über die lokale Variable this.props zugegriffen werden. Von außen betrachtet sind beide Komponentenarten äquivalent. Man sieht einer Komponente also bei der Benutzung nicht unmittelbar an, ob sie als Funktion oder Klasse implementiert wurde. In Listing 1 sind drei Komponenten zu sehen, die in ihrer Darstellung äquivalent sind und die verschiedenen Arten zeigen. Auch die beiden Varianten der Funktionskomponenten sind im Prinzip gleich – einmal kommt die klassische function-Syntax und einmal die modernere Arrow-Function-Schreibweise zum Einsatz.

Listing 1

// Klassenkomponente class ...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang