Unsere Komponenten sind dann sowohl genug gross, als auch genug klein, wenn sie…
- eine logische Trennung haben
- wiederverwendbar sind
- wenig komplex sind
Kriterien
Wir trennen unsere UI in weitere Komponenten auf, wenn eine der folgenden vier Kriterien gegeben ist:- Logische Trennung von Inhalt und Layout → Enthält die Komponente Teile des Inhalts oder des Layouts, die nicht zusammengehören?
- Wiederverwendbarkeit → Kann ein Teil der Komponente wiederverwendet werden? Möchtest oder musst du die Komponente wiederverwenden?
- Verantwortlichkeiten und Komplexität → Macht die Komponente zu viele Dinge? Verlässt sich die Komponente auf zu viele Props? Hat die Komponente zu viele State-Variablen und/oder Effects? Ist der Code, inklusive JSX, zu komplex/verwirrend?
- Persönlicher Coding-Style → Bevorzugst du kleine Funktionen/Komponenten?
Tipp: Beginne im Zweifelsfall mit einer relativ grossen Komponente und unterteile sie dann nach Bedarf in kleinere Komponenten
Kategorien von Komponenten
Oftmals hilft es uns bei der Strukturierung von Komponenten auch zu verstehen welche Kategorien von Komponenten es gibt. Dabei fallen (fast) alle Komponenten in eine der drei folgenden Kategorien.Stateless / Presentation Components
- Kein State
- Können Props erhalten und präsentieren die erhaltenen Daten und anderen Inhalt
- Normalerweise klein und wiederverwendbar
Zum Beispiel:Logo-Komponente,Result-Komponente,Movie-Komponente, etc.
Stateful Components
- State
- Können dennoch wiederverwendbar sein
Zum Beispiel: Search-Komponente
Structural Components
- Pages, Layout oder Screens unserer App
- Resultat von Komposition
- Sind gross und nicht wiederverwendbar
Zum Beispiel:App-Komponente,MovieList-Komponente