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

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.

Mehr Infos

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
• Folge 6: Wiederverwendung von Code

Folgen und Kurse zu weiteren Themen finden sich in der tech:lounge von the native web.

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:

Empfohlener redaktioneller Inhalt

Mit Ihrer Zustimmmung wird hier eine Vimeo-Video (Vimeo LLC) geladen.

Vimeo-Video immer laden Vimeo-Video jetzt laden

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 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. ()