đź“š
Lerndokumentationen
Web
Web
  • Willkommen
  • HTML
    • Was ist HTML?
    • Elemente
    • Attribute
    • Boilerplate
  • Textelemente
  • Links
  • Dokumentenstruktur
  • Medien
  • Tabellen
  • Formulare
  • CSS
    • Was ist CSS?
    • Syntax
  • Einheiten
  • Selektoren
  • Boxmodell
  • HintergrĂĽnde und Rahmen
  • Overflow
  • Bilder
  • Formulare
  • Textelemente
  • Layout
    • Flexbox
    • Grid
  • Responsive Design
  • JavaScript
    • Was ist JavaScript?
    • Einbindung in HTML
    • Grundlagen
      • Variablen und Werte
      • Datentypen
      • Operatoren und AusdrĂĽcke
      • Kontrollstrukturen
      • Schleifen
    • Funktionen
      • Funktionsdeklarationen vs. FunktionsausdrĂĽcke
      • Arrow Functions
      • Standardparameter und Rest-Parameter
      • First-Class und Higher-Order-Funktionen
      • Closures
      • IIFE (Immediately Invoked Function Expressions)
    • Arrays
      • Erstellen und Modifizieren
      • Iteration ĂĽber Arrays
      • Sortieren
      • NĂĽtzliche Methoden
    • Objekte und Datenstrukturen
      • Erstellen und Manipulieren
      • Destructuring
      • Sets und Maps
    • Strings
      • Template Literals
      • Methoden
    • Moderne JavaScript-Features
      • Optionale Verkettung
      • Nullish Coalescing Operator
      • Spread und Rest Operator
      • KurzschlussausdrĂĽcke
    • Scope und Kontext
      • this Keyword
      • Call, Apply und Bind
      • Hoisting und Temporal Dead Zone (TDZ)
    • Objektorientierte Programmierung
      • Prototypes
      • Constructor Functions
      • ES6 Classes
      • Die create()-Methode
    • Asynchronous JavaScript
      • AJAX
      • Promises
    • Zahlen, Daten, Internationalisierung und Timer
      • Mathematische Operationen
      • Datum und Zeit
      • Internationalisierung
      • Timer
    • Modules
    • JavaScript im Browser (DOM und Events)
      • Das DOM
      • Elemente auswählen, erstellen und manipulieren
      • Styles, Attribute und Klassen
      • Events und Event Listener
      • Event Propagation
        • Event Delegation
      • DOM Traversing
    • JavaScript Engine und Performance
      • Execution Context und Call Stack
  • TypeScript
    • Was ist TypeScript?
  • Compiler und Runtimes
  • Konfiguration
  • Types
    • Primitive Typen und Typableitung
    • Arrays und Tupel
    • Objekte
    • Top- und Bottom-Types
    • Enums
    • Utility Types
      • Records
  • Typenkombination
    • Union Types
    • Discriminated Unions
    • Intersections
  • Funktionen
  • Klassen
    • Grundlagen
    • Feldinitialisierer
    • SchreibgeschĂĽtzte Felder
    • Implementieren
    • Private und GeschĂĽtzte Member
    • Getter und Setter
    • Statische Member
    • Abstrakte Klassen und Member
  • Modules
    • Importieren und Exportieren
    • Ambient Types
    • Namespaces
    • Globals
  • React
    • Was ist React?
    • JSX
    • Komponenten
      • Root-Komponente
      • Styling
      • Listen
      • Conditional Rendering
      • Fragments
    • Props
      • Destructuring
      • Children
    • Interaktivität
      • Event Handling
      • State
      • Formulare
    • State Management
      • State anheben
      • Derived State
    • Komposition und Reusability
      • Komponentenstrukturierung
      • Prop Drilling
      • Komposition
Bereitgestellt von GitBook
Auf dieser Seite
  • Kriterien
  • Kategorien von Komponenten
  • Stateless / Presentation Components
  • Stateful Components
  • Structural Components
  1. React
  2. Komposition und Reusability

Komponentenstrukturierung

Wenn wir die UI in Komponenten aufteilen mĂĽssen wir eine Balance zwischen zu grossen und zu kleinen Komponenten finden.

Komponenten sind zu gross, wenn sie …

  • zu viele Verantwortlichkeiten haben

  • viele Props benötigen

  • schwer wiederverwendbar sind

  • komplex und schwer zu verstehen sind

Andererseits sind Komponenten zu klein, wenn …

  • wir am Schluss hunderte Mini-Komponenten haben

  • unsere Codebase verwirrend ist

  • sie zu abstrakt sind

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:

  1. Logische Trennung von Inhalt und Layout → Enthält die Komponente Teile des Inhalts oder des Layouts, die nicht zusammengehören?

  2. Wiederverwendbarkeit → Kann ein Teil der Komponente wiederverwendet werden? Möchtest oder musst du die Komponente wiederverwenden?

  3. 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?

  4. 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

VorherigeKomposition und ReusabilityNächsteProp Drilling

Zuletzt aktualisiert vor 5 Monaten