Einführung in React, Folge 5: Der unidirektionale Datenfluss

the next big thing  –  0 Kommentare

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

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:

Einführung in React, Folge 5: Der unidirektionale Datenfluss

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.