Startseite / Artikel / React-Designmuster: Von klassischem OOP zu modernen Hooks

React JavaScript Design Patterns Frontend Software Architecture

React-Designmuster: Von klassischem OOP zu modernen Hooks

Erklärt, wie klassische Softwaremuster wie Singleton, Factory und Observer in React Anwendung finden, sowie reaktions-spezifische Muster wie HOCs, Hooks und Compound Components.

1624 Wörter

Viele Entwickler, die neu mit React arbeiten, erkennen nicht sofort, dass Designmuster auch außerhalb von Backend-Systemen Anwendung finden. Es ist üblich, anzunehmen, dass diese Konzepte nur für die Serverseitige Architektur relevant sind – um anschließend, beim professionellen Aufbau von Frontend-Anwendungen, festzustellen, dass viele dieser Muster bereits instinktiv angewandt werden, ohne dass ihnen ein bewusster Begriff zugeordnet wird.

Designmuster sind im Grunde genommen erprobte, wiederverwendbare Vorlagen zur Lösung wiederkehrender Probleme, die in Softwareprojekten immer wieder auftauchen. Wenn Sie möchten, dass Ihre Codebasis organisiert, gut strukturiert und logisch miteinander verbunden bleibt, bieten Ihnen diese Muster einen Leitfaden. Sie fungieren als kodifizierte Best Practices, die die Qualität Ihres Codes verbessern und seine Wartbarkeit verlängern.

Zu den größten Vorteilen von Designmustern gehören Wiederverwendbarkeit, Wartbarkeit, Skalierbarkeit sowie Geschwindigkeits- und Effizienzvorteile. Bevor man sich mit speziellen Mustern für React beschäftigt, lohnt es sich, die grundlegenden Softwareengineering-Muster zu überprüfen, die bereits vor den Frontend-Frameworks existierten.

Klassische Softwareengineering-Muster

Es handelt sich dabei um Muster, die unabhängig von einer bestimmten Sprache existieren und weitgehend in objektorientierten sowie funktionalen Paradigmen Anwendung finden. React selbst stützt sich intern auf mehrere dieser Muster, und Entwickler, die im React-Codebase arbeiten, nutzen sie, um Zustände zu organisieren, Abhängigkeiten im Lebenszyklus zwischen Komponenten zu koordinieren, die Größe der Pakete zu verringern und komplexe UI-Logik verständlich zu halten.

Singleton-Muster

Dieses Muster garantiert, dass eine Klasse oder ein Objekt während der gesamten Laufzeit einer Anwendung genau eine Instanz besitzt, und stellt gleichzeitig einen einzigen globalen Zugriffspunkt auf diese Instanz bereit.

Auf der Frontend-Seite ist das Singleton-Muster nützlich zum Verwalten gemeinsamer Ressourcen – wie zentralisierte Zustandsspeicher, konfigurationsbasierte Objekte für die gesamte Anwendung, Instanzen zur Analyse von Nutzeraktivitäten oder einen einzigen gemeinsamen API-Client.

// Singleton API Service
class APIClient {
  constructor() {
    if (APIClient.instance) {
      return APIClient.instance;
    }
    this.baseURL = "https://api.example.com";
    APIClient.instance = this;
  }

  fetchData(endpoint) {
    return fetch(`${this.baseURL}${endpoint}`).then(res => res.json());
  }
}

// Any module importing/instantiating this gets the exact same instance
const client1 = new APIClient();
const client2 = new APIClient();
console.log(client1 === client2); // true

Mit modernen ES-Modulen ist eine manuelle Instanzprüfung nicht mehr notwendig – es reicht aus, einfach ein gemeinsames Objekt oder eine Instanz zu exportieren, um kostenlos Singleton-Verhalten zu erzielen.

// apiClient.js
export const apiClient = new APIClient(); // ES modules cache exports automatically

Factory-Muster

Das Factory-Muster definiert eine Schnittstelle zur Erstellung von Objekten, ohne dass der aufrufende Code die spezifische Klasse oder Konstruktorfunktion kennen muss, die für die Erstellung dieses Objekts verantwortlich ist.

Dieses Muster kommt zum Tragen, wenn Sie dynamisch UI-Elemente erzeugen müssen, mit API-Antworten umgehen, die in verschiedenen Formen auftreten, oder Abstraktionen erstellen, die Plattformunterschiede verbergen – beispielsweise indem Sie die Handhabung von Eingabevorgängen im Web und auf Mobilgeräten vereinheitlichen.

// Button Factory for dynamically rendering UI elements
function createButton(type, config) {
  switch (type) {
    case 'primary':
      return { role: 'btn-primary', label: config.label, onClick: config.onClick };
    case 'icon':
      return { role: 'btn-icon', icon: config.iconName, onClick: config.onClick };
    case 'link':
      return { role: 'btn-link', href: config.url };
    default:
      throw new Error(`Unsupported button type: ${type}`);
  }
}

const primaryBtn = createButton('primary', { label: 'Submit', onClick: () => {} });

Observer-Muster

Dies ist der zugrunde liegende Mechanismus hinter Event-Listenern sowie hinter State-Management-Bibliotheken wie Redux, Zustand und MobX. Es sei darauf hingewiesen, dass Reacts Context-API nicht auf diesem Muster beruht.

class EventEmitter {
  constructor() {
    this.events = {};
  }

  // Subscribe
  on(event, listener) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(listener);
  }

  // Publish
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(listener => listener(data));
    }
  }
}

// Usage
const store = new EventEmitter();

// Component A subscribes to state changes
store.on('userLoggedIn', user => console.log(`Welcome, ${user.name}!`));

// Login Service triggers event
store.emit('userLoggedIn', { name: 'Sarah' });

Modul-Muster

Dieses Muster umschließt Code in einer Schleife, sodass interne Variablen und Funktionen privat bleiben und nur eine absichtlich ausgewählte öffentliche Schnittstelle zur Verfügung steht.

Bevor native ES6-Module verfügbar waren, war dies die gängige Methode, um das globale window-Objekt sauber zu halten und echte Variable-Privatsphäre in JavaScript zu erreichen.

// Module using IIFE (Immediately Invoked Function Expression)
const ShoppingCartModule = (function () {
  // Private variable
  const cart = [];

  // Private function
  function calculateTotal() {
    return cart.reduce((sum, item) => sum + item.price, 0);
  }

  // Public API
  return {
    addItem(item) {
      cart.push(item);
    },
    getTotal() {
      return calculateTotal();
    }
  };
})();

ShoppingCartModule.addItem({ name: 'Keyboard', price: 100 });
console.log(ShoppingCartModule.getTotal()); // 100
console.log(ShoppingCartModule.cart); // undefined (Private!)

Heutzutage kümmern sich native ES-Module mit import und export automatisch um das Scoping, sodass man nur selten eine Schließfunktion selbst implementieren muss, um Variablen privat zu halten.

// cart.js
const cart = []; // Private to cart.js file
export const addItem = (item) => cart.push(item);
export const getTotal = () => cart.reduce((sum, i) => sum + i.price, 0);

Reaktions-spezifische Komponenten-Designmuster

Die unten aufgeführten Muster begegnen Herausforderungen, die sich speziell aus dem Rendern von UIs, dem Teilen von Logik zwischen Komponenten, der Verwaltung von Zustand in einem Baumstruktur sowie dem Vermeiden übermäßiger Prop-Vererbung ergeben.

In diesem Abschnitt werden die folgenden komponentenbezogenen Muster erläutert:

das HOC-Muster
das um Hooks aufgebaute Muster
das Kombinationskomponenten-Muster
die Trennung zwischen Container und Präsentationskomponente
der Ansatz mit Render-Props
das sich entwickelnde AI-UI-Muster

HOC-Muster

Das Higher Order Component, kurz HOC, ist eine der ersten Techniken, die React zur Bewältigung von Querschnittsaufgaben anbot. Stellen Sie sich eine Situation vor, in der ein Benutzer die Tracking-Funktion aktiviert hat und Sie unverzüglich nach dem Laden eines Komponenten ein Analyseereignis auslösen müssen. Die Eingabe dieser Logik in jedes Seitenkomponenten wird schnell repetitiv, und deren späterer Anpassung – beispielsweise bei Änderungen am Analytics-SDK – entsteht ein erhebliches Wartungsaufwand. Genau solche Probleme soll das HOC-Muster lösen.

Ein HOC übernimmt eine vorhandene Komponente und fügt ihr zusätzliches Verhalten hinzu, ohne dass die ursprüngliche Komponente von diesem zusätzlichen Verhalten wissen muss. Diese Trennung ist das Kernprinzip dieses Musters. Beispielsweise konzentriert sich eine Page-Komponente ausschließlich auf das Rendering, während ihre Umhüllung mit withAnalytics(Page) die Tracking-Logik getrennt handhabt.

In neueren Codebasen haben Hooks diese Aufgabe größtenteils übernommen, doch im Rahmen von veralteten React-Projekten stößt man weiterhin häufig auf das HOC-Muster.

Hooks-Muster

Nur wenige Ergänzungen haben React so grundlegend verändert wie Hooks. Sie wurden 2019 in React 16.8 eingeführt und sind seitdem der Standardansatz für die Erstellung des Großteils moderner React-Code.

Durch das Hooks-Muster können Entwickler statebasierte Logik sowie Nebeneffekte mithilfe gewöhnlicher Funktionen in verschiedenen Komponenten wiederverwenden und so ältere Ansätze wie HOCs sowie render Props ersetzen.

Komponentenmuster

Das Komponentenmuster ermöglicht es einer Gruppe von Komponenten, implizit an gemeinsamem Zustand und Logik zusammenzuarbeiten, ohne alles manuell über Props weitergeben zu müssen. Es kommt am häufigsten in komplexen interaktiven UI-Elementen wie Dropdown-Menüs, Akkordeons, Tabs und Navigationsmenüs vor.

Container / Präsentationsmuster

Dieses Muster gewährleistet eine klare Trennung der Aufgaben, indem es die Verantwortlichkeiten eines Komponenten in zwei unterschiedliche Rollen aufteilt: eine, die für die Anwendungslogik zuständig ist, und eine, die sich ausschließlich auf die Darstellung der Benutzeroberfläche konzentriert.

Die Container-Komponente ist dafür verantwortlich, zu entscheiden, welche Daten der Benutzer sehen soll. Sie verwaltet den Zustand, kümmert sich um Nebeneffekte und enthält die Anwendungslogik.

Die Präsentationskomponente hingegen kümmert sich darum, wie diese Daten dargestellt werden. Sie erhält lediglich Daten und Callback-Funktionen über Props, ohne die zugrunde liegenden Daten selbst jemals zu verändern.

Die moderne React-Entwicklung neigt stark zu benutzerdefinierten Hooks anstelle dieser Trennung in Container und Präsentationskomponenten. Anstatt eine eigene Containerkomponente nur zum Abrufen von Daten zu erstellen, kann man diese Abruflogik in einen benutzerdefinierten Hook auslagern und diesen direkt innerhalb der Komponente aufrufen, die ihn benötigt. Dadurch bleibt die Trennung der Aufgaben gewahrt, während überflüssige Schichten von Komponentennestern sowie wiederholender Boilerplate-Code vermieden werden.

Render Props-Muster

Mit diesem Muster wird eine Funktion als Eigenschaft an eine Komponente weitergegeben, wodurch diese Komponente die Kontrolle über Zustand und Logik erhält, während die Entscheidung darüber, was dargestellt werden soll, bei der Komponente liegt, die sie verwendet.

Die grundlegende Idee hinter Render Props ist, dass die Wrapper-Komponente anstelle dessen, selbst eine fest programmierte Benutzeroberfläche darzustellen, ihre interne Logik ausführt und anschließend eine Funktion als Eigenschaft aufruft, um den resultierenden JSX-Code zu erzeugen.

In modernen React-Implementierungen haben benutzerdefinierte Hooks größtenteils die Rolle der render Props übernommen, die früher zur Verbreitung reiner Datenlogik dienten. Dennoch sind render Props weiterhin sinnvoll, wenn eine Komponente einen ganzen Unterbaum besitzen und steuern muss, während der Aufrufer den Markup-Code festlegen kann. Headless-UI-Bibliotheken wie React Aria und TanStack Table nutzen diesen Ansatz, um komplexe Funktionalitäten – wie Zugänglichkeitshandhabung, Fokusbereitung und ähnliche Aspekte – bereitzustellen, ohne bestimmte Styling-Vorgaben oder DOM-Strukturen vorzugeben.

AI UI-Muster

Das ist eine relativ neue Ergänzung zur Liste. Der Aufbau von durch KI angetriebenen Interfaces – sei es Chatbots oder allgemeinere intelligente Assistenten – erfordert eine sorgfältige Koordination zwischen den Backend-KI-Diensten und der reaktiven UI-Schicht. Das AI-UI-Muster dreht sich im Grunde darum, große Sprachmodell-Backends mit responsiven Client-Interfaces zu verbinden, damit diese konversationelle Austausche, gestreamte Antworten sowie asynchrone Modellausführungen reibungslos bewältigen können.

Eine der zentralen Ideen hier ist es, das Backend sowie die Proxy-Schicht vom Client zu trennen. Um API-Schlüssel vor der Offenlegung zu schützen und die Rechenlast ordnungsgemäß zu verwalten, müssen alle mit KI verbundenen Aufrufe über eine serverseitige Schicht laufen – beispielsweise Next.js Route Handlers oder ein Node.js API-Proxy, der vor Vite steht. Den Aufruf von KI-Diensten direkt vom Browser aus sollte man vollständig vermeiden.