React: Zehn Jahre "Rethinking Best Practices"
Seite 2: Alles im Fluss
Mit der Vorstellung des Architekturmusters Flux hat sich das React-Team 2014 dieses Problems angenommen. Die Idee von Flux ist es, die (clientseitigen) Daten einer Anwendung komplett aus der Komponentenhierarchie herauszulösen und in einen Store zu überführen. Eine Komponente kann nun fachliche Actions auslösen, die vom Store interpretiert und zu Änderungen an den Daten dieses Stores führen. Auf der anderen Seite können sich Komponenten an dem Store als Listener anmelden, um sich über Änderungen informieren zu lassen. Der unidirektionale Datenfluss bleibt damit erhalten, weil die Daten immer aus einer Komponente in den zentralen Store fließen und von dort zu den interessierten Komponenten gelangen.
Gab es anfangs eine ganze Reihe unterschiedlicher Implementierungen des Flux-Architekturmusters, hat sich im Laufe der Zeit nur eine durchgesetzt, die Flux auf eine sehr eigene Art und Weise interpretiert: Redux.
Dan Abramov hatte Redux 2015 in seinem Vortrag auf der React Europe Conf in Paris vorgestellt (siehe Video). Danach avancierte Redux schnell zum Standard-Repertoire in vielen React-Anwendungen. Angesichts seiner eher speziellen API scheiden sich die Geister bei Redux – es wird gleichermaßen geliebt und gefürchtet. Fans sind unter anderem vom sogenannten Time Travelling Debugger begeistert. Die Redux Devtools können alle Änderungen an den im Store hinterlegten Daten aufzeichnen und wiederherstellen. Auf diese Weise lässt sich das Verhalten einer Anwendung im Nachhinein Schritt für Schritt vor- und zurückspulen, um zu sehen, wie sich Daten und Darstellung infolge einer Aktion jeweils verändert haben.
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmmung wird hier ein externes YouTube-Video (Google Ireland Limited) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Google Ireland Limited) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
In den Anfangstagen von Redux waren hingegen große Mengen an Boilerplate-Code gefürchtet, die komplexe Anbindung an React-Komponenten und die sehr spezielle API zum Arbeiten mit Seiteffekten (zum Laden von Daten von einem Server) in Form von Thunk Actions. Erschwerend kam hinzu, dass es zu der Zeit noch nicht üblich und möglich war, React und Redux vollständig typsicher, beispielsweise mit TypeScript, zu entwickeln. Entsprechend groß war die Gefahr, dass sich Fehler in den Programmcode einschlichen. Ungeachtet der Stolpersteine war und ist Redux aber aus vielen React-Projekten nicht wegzudenken.
Einige der geschilderten Probleme gehören mittlerweile der Vergangenheit an: Die Weiterentwicklung von Redux haben Mark Erikson und Lenz Weber-Tronic übernommen, die 2019 das Redux Toolkit (ursprünglich "Redux Starter Kit") veröffentlichten. Es vereinfacht nicht nur die Konfiguration und Installation von Redux erheblich, auch die APIs sind einfacher und dank umfassendem TypeScript-Support auch weniger fehleranfällig in der Bedienung. Das komfortable Arbeiten mit Daten vom Server unterstützt das Redux Toolkit zudem durch das integrierte RTK Query.
Einführung und Trennung von Klassen
Das Jahr 2015 markierte nicht nur für React einen Einschnitt, sondern für die gesamte JavaScript-Community. Mitte dieses Jahres erschien das lang erwartete "große" neue JavaScript-Release ECMAScript 6, das eine ganze Reihe von Neuerungen mitbrachte. Da es viele berüchtigte Schwächen der Sprache behoben hat, wird es auch als "modernes JavaScript" bezeichnet. Zu den Neuerungen, die mittlerweile im Alltag gängig sind, zählen Block Scoping mit let und const, die Pfeil-Funktionen, die Promise API und auch die Unterstützung von Klassen mit dem class-Schlüsselwort.
Bereits Anfang 2015 wurde die createClass-Funktion zum Erzeugen von Komponenten durch die nativen JavaScript-Klassen in der React API ersetzt – gleichwohl lässt sich die createClass-API bis heute nahezu unverändert verwenden.
Das React-Team selbst stellte den Einsatz von Klassen immer wieder infrage. Sie seien zu komplex und insbesondere das this-Binding sei schwer verständlich und fehleranfällig. Noch im selben Jahr führte das Team daher die "Stateless function components" ein. Die neue API legte die Basis, um React-Komponenten ausschließlich mit JavaScript-Funktionen zu schreiben. Sie knüpft technisch an eine Grundidee von React an, nach der das UI sowie die UI-Komponenten als Funktionen anzusehen sind ("UI as a Function"), in die sich Daten einreichen lassen, und die für dieselben Daten immer dasselbe UI zurückgeben. Da die UI-Funktionen frei von Seiteneffekten sind, verhalten sie sich konzeptionell ähnlich wie mathematische Funktionen, die ebenfalls für dieselben Eingangsdaten immer dasselbe Ergebnis erzeugen – unabhängig vom Kontext oder Zeitpunkt ihres Aufrufs.
Der neue Ansatz blieb zunächst allerdings auf zustandslose Komponenten beschränkt, die allein der Darstellung dienten. Nach langem Warten, vielen Spekulationen und Experimenten erfolgte erst Anfang 2019 mit der Einführung der viel diskutierten React Hooks-API der Umstieg auf eine vollständig funktionsbasierte API. Seither ist es möglich, React-Komponenten nur mit JavaScript-Funktionen zu entwickeln.
