Einführung in React, Folge 6: Wiederverwendung von Code

the next big thing  –  2 Kommentare
Anzeige

React-Komponenten lassen sich wiederverwenden, wobei zwischen Präsentations- und Funktionskomponenten unterschieden wird. Dafür gibt es verschiedene Ansätze, unter anderem Container-Komponenten und Komponenten höherer Ordnung. Wie funktionieren sie?

Einer der großen Vorteile von React ist der Schwerpunkt auf Komponentenorientierung. Anders als bei vielen anderen Frameworks und Bibliotheken ist es bei React kaum möglich, eine UI nicht auf der Basis von Komponenten aufzubauen. Das bewirkt auf der einen Seite eine weitaus klarere Struktur von Anwendungen, steigert auf der anderen Seite aber auch den Bedarf an der Wiederverwendung von Code.

Anzeige

Von diesen Komponenten gibt es allerdings verschiedene Typen: So gibt es Komponenten, die primär der Darstellung dienen, andere wiederum kapseln Funktionalität. Beide Arten von Komponenten folgen unterschiedlichen Konzepten, die es bei der Entwicklung zu beachten gilt. Sehr praktisch an der Unterscheidung ist, dass man auf dem Weg leicht die Logik von der Darstellung trennen kann.

Besonders interessant in React sind neben den Container-Komponenten die sogenannten Higher-Order Components, die ebenfalls dem Kapseln von Funktionalität dienen. Sie stellen genau genommen allerdings keine Komponenten im eigentlichen Sinn dar, sondern eher Funktionen, die Komponenten parametrisiert erstellen – in gewissem Sinne also eine Factory für Komponenten.

Was es bei all diesen verschiedenen Typen von Komponenten zu beachten gibt, wie sie funktionieren, welcher Typ sich für welches Szenario eignet und wie sie sich verbinden und orchestrieren lassen, zeigt das folgende Video:

Einführung in React, Folge 6: Wiederverwendung von Code

tl;dr: React kennt verschiedene Arten von Komponenten, die verschiedene Aspekte einer Anwendung abdecken, beispielsweise Darstellung und Funktionalität. Higher-Order Components sind eine gute Möglichkeit, die beiden Aspekte auf elegante Weise zu verbinden.

Anzeige