© ecco/Shutterstock.com
React Hooks, Concurrent Mode und Co. unter der Lupe

React 16 im Überblick


Die Version 16 war das letzte Major-Release von React und wurde von der React-Community mit Spannung erwartet. Zeit, die seitdem in mehreren Minor-Releases neu hinzugefügten Features einmal genauer zu betrachten.

Seit dem Release von React 16, der aktuellen Major-Version der Bibliothek vom 26.09.2017, hat sich die Art und Weise, wie Applikationen mit React entwickelt werden, grundsätzlich geändert. Und das, obwohl es in dieser Zeit keine weiteren Major-Releases mehr gegeben hat. Das Entwicklerteam hinter React verfolgt strikt den Semantic-Versioning-Ansatz. Das bedeutet, dass für Breaking Changes ein neues Major-Release erforderlich ist. Bei kleineren Änderungen und Erweiterungen wird lediglich die Minor-Version aktualisiert. React arbeitet also nicht mit regelmäßigen Releases, wie es beispielsweise Angular oder Node tun. Das bedeutet allerdings auch, dass es bei React keine Longterm-Support-Releases oder Ähnliches gibt. Dafür hat sich React in den vergangenen Jahren als sehr stabile Lösung für Web-Frontends erwiesen und wird kontinuierlich weiterentwickelt. Dabei liegt der Fokus auf einer deklarativen Entwicklung von Benutzerschnittstellen auf einer komponentenbasierten Architektur. In diesem Artikel werfen wir einen Blick auf die verschiedenen Features der Bibliothek und wie sie sich auf die Entwicklung von Applikationen auswirken. Das React-Team hat eine grobe Roadmap für die wichtigsten Features der aktuellen Major-Version vorgestellt:

  • Suspense for Code Splitting

  • React Hooks

  • Concurrent Mode

  • Suspense for Data Fetching

Neben diesen bedeutenden Meilensteinen in der Entwicklung des Frameworks haben zahlreiche kleinere Features Einzug in den Kern von React gehalten. Die meisten Features beschäftigen sich entweder mit einer Verbesserung der Performance, die für den Benutzer einer Applikation spürbar sein soll, oder mit Verbesserungen der Schnittstellen von React, die auf stabileren und besser zu wartenden Quellcode abzielen.

React 16 – die Basis neuer Features

Unter dem Codenamen Fiber hat das React-Team den Reconciler von React, also den Algorithmus, der die Unterschiede zwischen dem aktuellen und dem zukünftigen Zustand der Applikation berechnet, neu geschrieben. Der Renderingprozess von React ist jetzt in zwei Phasen unterteilt: die Render-Phase und die Commit-Phase. In der Render-Phase werden beispielsweise der Konstruktor und die Render-Methode von Klassenkomponenten ausgeführt. Auch die Komponentenfunktion einer Funktionskomponente wird in dieser Phase aufgerufen. Die Besonderheit hierbei ist, dass diese Phase jederzeit von React pausiert, abgebrochen oder neu gestartet werden kann. Aus diesem Grund sind an dieser Stelle keine Seiteneffekte, wie beispielsweise Serverkommunikation erlaubt. Das versetzt React in die Lage, dass ein laufender Render-Prozess unterbrochen werden kann, falls eine höher priorisierte Änderung ansteht. Eine weitere Optimierung besteht darin, dass die bisher geleistete Arbeit beim Aufbau des neuen Zustands wiederverwendet werden kann. Der Commit-Prozess kann nicht unterbrochen werden. In dieser Phase des Renderingprozesses können Sie mit dem DOM arbeiten, Seiteneffekte ausführen und Updates planen. Diese Phase kann nicht mehr unterbrochen werden. Der Grund hierfür ist, dass die Operationen in dieser Phase für den Benutzer sichtbar sind oder mit Fremdsystemen kommuniziert wird. Im Fall eines Abbruchs einer DOM-Operation wäre die Benutzeroberfläche inkonsistent, was für den Benutzer eine erhebliche Einschränkung bis hin zu einer nicht benutzbaren Applikation wäre. Würde durch einen Seiteneffekt beispielsweise die Kommunikation mit einem Webserver unterbrochen und zu einem späteren Zeitpunkt wieder aufgenommen oder neu gestartet werden, erhöht das zum einen die Last auf dem Server und kann zum anderen bei schreibenden Operationen zu inkonsistenten Datenständen führen.

Für die Implementierung einer Applikation schadet es nicht, wenn Sie sich mit dem Renderingprozess von React eingehend beschäftigen. Wenn Sie allerdings einige Best Practices beachten, müssen Sie in der Regel nicht in die technischen Tiefen dieses Prozesses vorstoßen. So sollten Sie darauf achten, dass Sie keine Seiteneffekte oder DOM-Manipulationen direkt in der Render-Funktion der Komponente auslösen, sondern dafür die entsprechende Lifecycle-Funktion verwenden. Außerdem sollten Sie sich bewusst sein, dass alles, was Sie in der Render-Funktion ausführen, wirklich bei jedem Rendern der Komponente erfolgt. Das betrifft vor allem das Erzeugen von Callback-Funktionen. Hier gibt es gerade mit dem Hook API elegante Lösungsansätze.

Die grundlegende Philosophie von React

Mit diesen Hinweisen kommen wir zu einem sehr allgemeinen Thema in React: dem Aufbau einer Applikation und damit weniger zum Thema, wie Sie Ihre Dateien und Komponenten benennen und wo Sie sie im Dateisystem platzieren. Es geht vielmehr darum, wie Sie bei der Konzeption Ihrer Applikation vorgehen sollten und was Sie dabei beachten müssen. Wie die meisten Frameworks und Bibliotheken, die einen komponentenbasierten Ansatz verfolgen, arbeitet React auch sehr stark deklarativ. Das bedeutet, dass Sie mit Ihren Komponenten den gewünschten Zustand Ihrer Applikation beschreiben. Im Gegensatz dazu implementieren Sie bei einem imperativen Ansatz den Weg zu diesem Zustand. Der Vorteil einer deklarativen Komponente ist in der Regel, dass sie einfacher zu verstehen ist und Sie sich mehr auf die Modellierung des Zustands konzentrieren können, sich also weniger mit Implementierungsdetails aufhalten. Der deklarative Ansatz bringt mit sich, dass Sie direkte DOM-Manipulationen soweit möglich vermeiden sollten. Aus diesem Grund ist das Einbinden von Bibliotheken wie jQuery bei modernen JavaScript Frameworks ein klares Antipattern.

React macht bei der Implementierung einer Applikation kaum Vorgaben, was den Schnitt der Komponenten betrifft. Allerdings sollten Sie versuchen, die Komponenten so klein und unabhängig wie möglich zu dimensionieren. Das gewährleistet eine maximale Wiederverwendbarkeit innerhalb der Applikation. Kleine, spezialisierte Komponenten unterstützen die Komposition einer Applikation. Dabei ist eine Komponente für genau einen bestimmten Aspekt zuständig. Als einfaches Beispiel können Sie sich hier die Darstellung einer Liste vorstellen. In diesem Fall gibt es eine Komponente, die für die Liste selbst steht. Sie hat die Hoheit über die Daten der Liste und gibt die Verantwortung für die Anzeige der einzelnen Elemente an untergeordnete Komponenten weiter. Die übergeordnete Komponente weiß nichts von den Darstellungsdetails. Die Kindkomponente erhält nur die Informationen, die sie zur Anzeige benötigt. Mit dieser Vorgehensweise haben Sie die Möglichkeit, beide Komponenten relativ einfach auszutauschen.

Neben dieser generellen Vorgehensweise beim Aufbau einer Applikation verfolgt React noch weitere Grundprinzipien, die Sie bei Ihrer Arbeit beachten sollten: React ist nur eine Bibliothek und der Quellcode einer Applikation sollte so einfach wie möglich sein. Dass React kein Framework, sondern nur eine Bibliothek ist, mit der Sie grafische Oberflächen erzeugen können, hat zur Konsequenz, dass Ihnen React lediglich die grundlegenden Schnittstellen zur Verfügung stellt und Sie für alle weiteren Features zusätzliche Bibliotheken einbinden können und müssen. Typische Beispiele sind zentrales State Management, wie Sie es mit Redux bekommen, Formularvalidierung mit Formik, erweiterte Stylingmöglichkeiten mit styled components oder zusätzliche Features, wenn es um die Implementierung von Tests geht, mit der React Testing Library.

React versucht Ihnen das Leben als Entwickler so einfach wie möglich zu...

Neugierig geworden? Wir haben diese Angebote für dich:

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