Einführung in React, Folge 5: Der unidirektionale Datenfluss
Mit React entwickelte Anwendungen verwenden einen unidirektionalen Datenfluss. Das bedeutet, dass Daten stets nur in einer Richtung weitergegeben und verarbeitet werden. Das wirft einige Fragen auf, beispielsweise wie mit Zustand umzugehen ist. Worauf gilt es zu achten?
- Golo Roden
Mit React entwickelte Anwendungen verwenden einen unidirektionalen Datenfluss. Das bedeutet, dass Daten stets nur in einer Richtung weitergegeben und verarbeitet werden. Das wirft einige Fragen auf, beispielsweise wie mit Zustand umzugehen ist. Worauf gilt es zu achten?
Anders als UI-Frameworks wie Angular verzichtet React bewusst auf eine bidirektionale Datenbindung. An deren Stelle tritt der unidirektionale Datenfluss, bei dem Daten stets nur in einer Richtung übergeben werden.
Einführung in React
- Folge 1: Erste Schritte
- Folge 1.1: Release von React 16
- Folge 2: Ein tieferer Einblick
- Folge 3: Eingaben verarbeiten
- Folge 4: Der Komponenten-Lebenszyklus
- Folge 5: Der unidirektionale Datenfluss
Folgen und Kurse zu weiteren Themen finden sich in der tech:lounge von the native web.
Was zunächst nach einer gravierenden Einschränkung klingt, stellt sich tatsächlich als Bereicherung dar. Der unidirektionale Datenfluss erhöht nämlich die Nachvollziehbarkeit, wie Daten innerhalb der Anwendung verteilt und verarbeitet werden. Das erleichtert die Analyse und bei Bedarf die Fehlersuche.
Gelegentlich besteht allerdings Bedarf, Daten an die übergeordnete Komponente zurückzugeben. Damit das trotz dem unidirektionalen Datenfluss funktioniert, greift React wie in JavaScript üblich auf Callbacks zurück.
Wichtig bei alldem ist die Frage, welche Daten als State zu behandeln sind, und wo dieser State verwaltet werden soll. Dafür gibt es aber einige einfache Grundregeln, die als Leitplanken fungieren.
Wie das alles funktioniert, und was es dabei zu beachten gilt, zeigt das folgende Video:
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmmung wird hier eine Vimeo-Video (Vimeo LLC) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Vimeo LLC) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
tl;dr: React verwendet einen unidirektionalen Datenfluss, um die Verarbeitung von Daten in einer Anwendung zu steuern. Damit das funktioniert, muss geklärt werden, welche Daten als State zu behandeln sind und wo dieser State verwaltet werden soll. ()
