React.Component — Klassenkomponenten und wie sie funktionieren

Was ist React.Component?

React.Component ist eine abstrakte Klasse, die integrierte Methoden für die Arbeit mit Zustand, Props und dem Komponentenlebenszyklus bereitstellt. Um eine Klassenkomponente zu erstellen, definieren Sie eine Klasse, die React.Component erweitert, und implementieren die render-Methode.

React.Component erschien in der allerersten Version von React (2013) und blieb fünf Jahre lang die primäre Methode zur Erstellung von Komponenten. Das React-Ökosystem wurde um Klassen herum aufgebaut: Higher-Order Components (HOC), Render Props, Kontext — all diese Muster wurden mit Klassensyntax implementiert.

Mit der Veröffentlichung von React 16.8 im Jahr 2019 führte das React-Team Hooks als Alternative zu Klassen ein. Hooks lösten dieselben Probleme — Zustand, Effekte, Kontext — aber ohne Vererbung und komplexe Kontextbindung. React.Component bleibt vollständig unterstützt, aber der funktionale Ansatz wird für neue Projekte empfohlen.

Erstellen einer Klassenkomponente

Die minimale Klassenkomponente ist eine Klasse mit einer einzigen render-Methode, die ein React-Element zurückgibt. render ist die einzig erforderliche Methode. Sie muss eine reine Funktion von this.props und this.state sein: Derselbe Satz von Props und Zustand erzeugt dasselbe Ergebnis.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Konstruktor und Zustandsinitialisierung

Der Konstruktor wird vor der Montierung ausgeführt. Er ruft super(props) auf, um Props an die Elternklasse zu übergeben, und initialisiert this.state. Den Konstruktor für andere Zwecke — Abonnements, API-Aufrufe — zu verwenden, wird nicht empfohlen; dafür gibt es componentDidMount.

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

Zustandsverwaltung mit this.state und this.setState

this.state ist ein Objekt, das die Daten der Komponente enthält. Es direkt zu mutieren (this.state.count = 1) ist verboten — es löst kein erneutes Rendern aus und bricht die Vorhersagbarkeit. Der Zustand muss über this.setState aktualisiert werden, das ein neues Zustandsobjekt erstellt und ein erneutes Rendern auslöst.

setState kann ein Objekt oder eine Funktion akzeptieren. Die funktionale Form wird bevorzugt, wenn der neue Zustand vom vorherigen abhängt: this.setState(prev => ({ count: prev.count + 1 })). React kann mehrere setState-Aufrufe zur Leistungsoptimierung in einem Batch zusammenfassen.

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
  }

  handleClick() {
    this.setState(prev => ({ isOn: !prev.isOn }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

Eine wichtige Eigenschaft von setState ist, dass es asynchron ist. Nach dem Aufruf von setState wird der Zustand nicht sofort aktualisiert. Wenn Sie eine Aktion nach der Aktualisierung ausführen müssen, übergeben Sie einen Callback als zweites Argument: this.setState(newState, () => console.log(this.state)).

Lebenszyklusmethoden

Klassenkomponenten haben vordefinierte Methoden, die React zu bestimmten Zeitpunkten aufruft. Montierung — constructor → render → componentDidMount. Aktualisierung — render → componentDidUpdate. Demontierung — componentWillUnmount.

ComponentDidMount — Daten abrufen

componentDidMount ist der primäre Ort für Nebenwirkungen nach dem ersten Rendern. Hier werden HTTP-Anfragen durchgeführt, WebSocket-Verbindungen hergestellt und Timer gestartet. Wenn Sie das Abonnement nicht in componentWillUnmount bereinigen, tritt ein Speicherleck auf.

class UserProfile extends Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }));
  }

  componentWillUnmount() {
    // Cancel request on unmount
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

Bindung des this-Kontexts in Methoden

In JavaScript sind Klassenmethoden standardmäßig nicht an die Instanz gebunden. Wenn Sie eine Methode als Callback übergeben — an einen Ereignishandler, an einen Timer — ist this undefined (im Strict Mode) oder window (ohne Strict Mode). Ohne Bindung löst this.setState einen Fehler aus.

Es gibt drei Möglichkeiten zu binden: bind im Konstruktor, eine Pfeilfunktion im Callback und ein class field mit Pfeilfunktion. Die erste Methode ist die offizielle React-Empfehlung: einmal im Konstruktor binden, ohne die Funktion bei jedem Rendern neu zu erstellen.

// Method 1: bind in constructor (recommended)
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Class fields — moderne Syntax mit automatischer Bindung. Eine Pfeilfunktion in einer Klasseneigenschaft erfasst this aus dem Gültigkeitsbereich des Konstruktors. Der Nachteil ist, dass die Methode auf jeder Instanz erstellt wird, nicht auf dem Prototyp, was den Speicherverbrauch für hunderte Komponenten desselben Typs erhöht.

Klassen- vs. funktionale Komponenten

Die Wahl zwischen Klasse und Funktion ist nicht nur eine Frage der Syntax. Funktionale Komponenten mit Hooks lösen Probleme, die Klassen innewohnen: Duplizierung von Logik in verschiedenen Lebenszyklusmethoden (componentDidMount + componentDidUpdate), Komplexität mit this und die Unmöglichkeit, zusammengehörige Logik in einen wiederverwendbaren Block zu extrahieren.

Funktionale Komponenten sind einfacher zu testen — sie haben keinen internen Zustand (der vor Hooks nur in Klassen verfügbar war) und erfordern keine DOM-Montierung zur Überprüfung von Callbacks. React empfiehlt funktionale Komponenten für alle neuen Projekte; Dokumentation und Beispiele werden mit ihnen geschrieben.

Klassenkomponenten bleiben die beste Wahl bei der Arbeit mit Legacy-Code. Wenn ein Projekt vor 2019 gestartet wurde, enthält es wahrscheinlich tausende von Klassenkomponenten. Sie alle in einem einzigen Sprint auf Hooks umzuschreiben, ist riskant. React garantiert Abwärtskompatibilität: Klassenkomponenten werden nicht entfernt.

Migrationsstrategie von Klassen zu Hooks

Die schrittweise Migration beginnt mit der Analyse der Komponente. Einfache zustandslose Komponenten werden zuerst übersetzt — sie werden trivial durch Funktionen ersetzt. Dann — Komponenten mit einem oder zwei Zustandsfeldern, bei denen useState direkt this.state und this.setState ersetzt.

Komplexe Komponenten mit mehreren Lebenszyklusmethoden werden mit useEffect übersetzt. Die Logik von componentDidMount + componentDidUpdate wird in separate useEffect-Aufrufe mit unterschiedlichen Abhängigkeiten aufgeteilt. componentWillUnmount wird durch eine Rückgabefunktion innerhalb von useEffect ersetzt. Für komplexe Zustandslogik verwenden Sie useReducer.

Automatische Migrationstools — @phenomnomnominal/ts-react-class-to-hook oder Codemod-Skripte — können einfache Klassen automatisch konvertieren. Für komplexe Fälle bleibt die Migration Handarbeit, die ein Verständnis der Logik der ursprünglichen Komponente erfordert.