React Hooks in Kürze
von Ian Stump
Dies ist eine grundlegende Erklärung der React Hooks, es wird also überhaupt keinen Code geben. Der Kontext in diesem Text ist für jemanden, der ein Grundwissen in React hat.
Was sind React Hooks und warum revolutionieren sie die React-Szene?
React Hooks sind wahrscheinlich die wichtigste Neuerung des letzten Jahres in React, weil sie die Art und Weise, wie React bisher gemacht wurde, verändern. React Hooks sind im Grunde Funktionen, die den funktionalen Komponenten zusätzliche Komplexität verleihen, die nun eine Zustandslogik haben können, sowie etwas, das dem Lebenszyklus einer Klassenkomponente ähnelt.
Mit dem "useState"-Hook kann man sich in den React-State "einhaken", der seiner Alternative "this.setState" sehr ähnlich ist, nur dass er den alten und neuen State nicht zusammenführt.
Für die Verwaltung des Lebenszyklus in funktionalen Komponenten ist der "Effect"-Hook zuständig. Dies ist ein sehr komplexer Hook und wird einen eigenen Artikel benötigen, um ihn vollständig zu erklären, aber zusammenfassend kann er ähnliche Funktionen wie componentDidMount, componentDidUpdate und componentWillUnmount ausführen. Der Clou ist, dass alles mit einer einzigen API erledigt wird.
Es gibt auch "Custom Hooks", die Leute erstellen und weitergeben können, um die Funktionalität und Wiederverwendbarkeit zu erhöhen.
Einige grossartige Custom Hooks: https://github.com/rehooks/awesome-react-hooks
Mit dem "useState"-Hook kann man sich in den React-State "einhaken", der seiner Alternative "this.setState" sehr ähnlich ist, nur dass er den alten und neuen State nicht zusammenführt.
Für die Verwaltung des Lebenszyklus in funktionalen Komponenten ist der "Effect"-Hook zuständig. Dies ist ein sehr komplexer Hook und wird einen eigenen Artikel benötigen, um ihn vollständig zu erklären, aber zusammenfassend kann er ähnliche Funktionen wie componentDidMount, componentDidUpdate und componentWillUnmount ausführen. Der Clou ist, dass alles mit einer einzigen API erledigt wird.
Es gibt auch "Custom Hooks", die Leute erstellen und weitergeben können, um die Funktionalität und Wiederverwendbarkeit zu erhöhen.
Einige grossartige Custom Hooks: https://github.com/rehooks/awesome-react-hooks
Werden React Hooks die React Class Components ersetzen?
Ich zitiere die offizielle Dokumentation:
"Es gibt keine Pläne, Klassen aus React zu entfernen... Wir beabsichtigen, dass Hooks alle existierenden Anwendungsfälle für Klassen abdecken, aber wir werden für die absehbare Zukunft weiterhin Klassenkomponenten unterstützen."
Das heisst, Hooks bekommen langsam die gleiche Funktionalität wie React Classes, sind aber leichter, konfigurierbarer, weniger komplex und wiederverwendbar.
"Es gibt keine Pläne, Klassen aus React zu entfernen... Wir beabsichtigen, dass Hooks alle existierenden Anwendungsfälle für Klassen abdecken, aber wir werden für die absehbare Zukunft weiterhin Klassenkomponenten unterstützen."
Das heisst, Hooks bekommen langsam die gleiche Funktionalität wie React Classes, sind aber leichter, konfigurierbarer, weniger komplex und wiederverwendbar.
Wann sollte ich sie lernen/verwenden?
Unser Rat in Schritten:
- Mach dich mit Classes vertraut
- Beginne, "stumme" Funktionskomponenten zu verwenden
- Unterscheide, wann du die einzelnen Komponenten verwenden solltest
- Versuche nicht, den alten Code auf Hooks zu refaktorieren, sondern erstelle neue funktionale Komponenten mit Hooks (dies wird auch in der offiziellen Dokumentation empfohlen)
Wann sollte ich sie nicht verwenden?
- Innerhalb einer Schleife, einer Bedingung oder einer verschachtelten Funktion
- Innerhalb einer Klassenkomponente (offensichtlich)
Zusammengefasst
Hooks sind der neue Trend in der React-Welt. Sie werden Klassen nicht ersetzen, aber die Idee ist, sie mehr und mehr zu verwenden, wegen ihrer Einfachheit und dennoch zusätzlichen Funktionalität. Verwende sie so oft wie möglich, und probiere die Custom Hooks aus, denn es gibt wahrscheinlich jemanden, der mit einem Problem zu kämpfen hatte und die Lösung als React Hook hochgeladen hat.
