React-Klassenkomponenten: State, Lifecycle, Umwandlung

Eine Klassenkomponente ist eine JavaScript-Klasse, die React.Component erweitert und aus einer Methode render() JSX zurückgibt. Sie liest Props aus this.props, hält State in this.state und aktualisiert ihn mit this.setState(). Funktionskomponenten mit Hooks haben sie für neuen Code ersetzt, aber Klassen werden weiterhin voll unterstützt, tauchen in vielen älteren Codebasen auf und sind der einzige Weg, eine Error Boundary zu schreiben.

import { Component } from 'react';

class Counter extends Component {
    state = { count: 0 };

    render() {
        return (
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                {this.props.label}: {this.state.count}
            </button>
        );
    }
}

export default function App() {
    return (
        <div style={{ display: 'flex', gap: 8 }}>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

Jeder Zähler behält seinen eigenen State. Füge einen dritten <Counter label="Plums" /> hinzu, und auch er beginnt bei 0.

Der Aufbau einer Klassenkomponente

import { Component } from 'react';

class Welcome extends Component {
    static defaultProps = { name: 'stranger' };

    constructor(props) {
        super(props); // required before using this
        this.state = { visits: 1 };
    }

    render() {
        return <h1>Hello, {this.props.name}. Visit #{this.state.visits}</h1>;
    }
}

• Die Klasse erweitert Component (oder React.Component mit import React from 'react').
• render() ist Pflicht. Die Methode muss pur sein, wie der Körper einer Funktionskomponente: this.props und this.state lesen, JSX zurückgeben.
• this.props enthält die Props. Sie sind schreibgeschützt.
• State kann in einem constructor gesetzt werden (zuerst super(props) aufrufen) oder, heute üblicher, als Klassenfeld: state = { visits: 1 };.
• static defaultProps funktioniert in React 19 für Klassen weiterhin (entfernt wurde es nur für Funktionskomponenten).

this.setState führt zusammen und kann einen Updater annehmen

setState macht zwei Dinge anders als der Setter von useState. Es führt das übergebene Objekt mit dem aktuellen State zusammen, also aktualisierst du nur die Schlüssel, die du nennst. Und wie jedes State-Update in React wird es nicht sofort angewendet, also nutze die Updater-Form, wenn der nächste Wert vom vorherigen abhängt.

import { Component } from 'react';

class Profile extends Component {
    state = { name: 'Ada', likes: 0, address: { city: 'London', zip: 'NW1' } };

    addThreeWrong = () => {
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
        this.setState({ likes: this.state.likes + 1 });
    };

    addThreeRight = () => {
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
        this.setState((state) => ({ likes: state.likes + 1 }));
    };

    moveCity = () => {
        // The merge is shallow: this replaces the whole address object
        this.setState({ address: { city: 'Paris' } }, () => console.log('after update:', this.state.address));
    };

    render() {
        const { name, likes, address } = this.state;
        return (
            <div>
                <p>{name} has {likes} likes and lives in {address.city} ({address.zip || 'no zip'}).</p>
                <button onClick={this.addThreeWrong}>+3 with objects</button>
                <button onClick={this.addThreeRight}>+3 with updaters</button>
                <button onClick={this.moveCity}>Move to Paris</button>
            </div>
        );
    }
}

export default function App() {
    return <Profile />;
}

„+3 with objects“ addiert eins, weil alle drei Aufrufe dasselbe this.state.likes lesen. „+3 with updaters“ addiert drei. „Move to Paris“ behält name und likes (das Zusammenführen), verliert aber zip, weil das Zusammenführen nur eine Ebene tief geht. Schreib address: { ...this.state.address, city: 'Paris' }, um es zu behalten. Das optionale zweite Argument von setState läuft nach dem Update, und die Konsole zeigt dort die neue Adresse.

Event-Handler binden

Eine Methode, die als onClick={this.handleClick} übergeben wird, wird später als einfache Funktion aufgerufen, ohne ihr Objekt, also ist this darin undefined.

// This throws when you press the first button: this is undefined in an unbound method.
import { Component } from 'react';

class Toggle extends Component {
    state = { on: false };

    handleClickBroken() {
        this.setState({ on: !this.state.on });
    }

    handleClickArrow = () => {
        this.setState({ on: !this.state.on });
    };

    render() {
        return (
            <div>
                <button onClick={this.handleClickBroken}>Broken method</button>
                <button onClick={this.handleClickArrow}>Class field arrow</button>
                <p>The switch is {this.state.on ? 'on' : 'off'}.</p>
            </div>
        );
    }
}

export default function App() {
    return <Toggle />;
}

Der erste Button loggt einen TypeError beim Lesen von setState auf undefined. Der zweite funktioniert, weil eine Arrow Function in einem Klassenfeld this beim Erzeugen der Instanz festhält. Die ältere Lösung, in Legacy-Code noch verbreitet, bindet im Konstruktor:

constructor(props) {
    super(props);
    this.state = { on: false };
    this.handleClick = this.handleClick.bind(this);
}

Eine Inline-Arrow-Function, onClick={() => this.handleClick()}, funktioniert ebenfalls.

Lifecycle-Methoden

Klassen reagieren über Methoden mit festen Namen auf Mounten, Aktualisieren und Unmounten. Die, die du am häufigsten siehst:

• componentDidMount(): nachdem der erste Render im DOM ist. Starte Timer, Abonnements, Anfragen.
• componentDidUpdate(prevProps, prevState): nach jedem Update. Vergleiche mit den vorherigen Werten, bevor du arbeitest, sonst entsteht eine Schleife.
• componentWillUnmount(): vor dem Entfernen. Mach rückgängig, was componentDidMount gestartet hat.
• shouldComponentUpdate(nextProps, nextState): gib false zurück, um einen Render zu überspringen.

Die Seite zum Lifecycle von Komponenten hat die vollständige Liste, die Reihenfolge, in der sie laufen, und eine Komponente, die jede davon loggt.

Eine Klasse in eine Funktionskomponente umwandeln

Hier ist eine Klasse, die alle drei häufigen Lifecycle-Methoden nutzt. Sie tickt jede Sekunde, loggt, wenn sich ihre Prop label ändert, und stoppt ihren Timer, wenn sie entfernt wird.

import { Component, useState } from 'react';

class Timer extends Component {
    state = { seconds: 0 };

    componentDidMount() {
        this.intervalId = setInterval(this.tick, 1000);
    }

    componentDidUpdate(prevProps) {
        if (prevProps.label !== this.props.label) {
            console.log('label changed to', this.props.label);
        }
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    tick = () => {
        this.setState((state) => ({ seconds: state.seconds + 1 }));
    };

    render() {
        return <p>{this.props.label}: {this.state.seconds}s</p>;
    }
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

Und dieselbe Komponente als Funktion. Jede Lifecycle-Methode wird Teil eines Effekts, und zusammengehöriges Setup und Cleanup stehen nebeneinander statt in zwei Methoden.

import { useEffect, useState } from 'react';

function Timer({ label }) {
    const [seconds, setSeconds] = useState(0);

    // componentDidMount + componentWillUnmount
    useEffect(() => {
        const intervalId = setInterval(() => setSeconds((s) => s + 1), 1000);
        return () => clearInterval(intervalId);
    }, []);

    // componentDidUpdate for label (this also runs once after mount)
    useEffect(() => {
        console.log('label is', label);
    }, [label]);

    return <p>{label}: {seconds}s</p>;
}

export default function App() {
    const [label, setLabel] = useState('Reading');
    return (
        <div>
            <button onClick={() => setLabel(label === 'Reading' ? 'Writing' : 'Reading')}>Change label</button>
            <Timer label={label} />
        </div>
    );
}

Beide Timer zählen gleich und loggen bei jeder Änderung des Labels. Die Funktionsversion loggt außerdem einmal beim Mounten, weil ein Effekt auch nach dem ersten Render läuft. Die Schritte für jede Umwandlung:

1. this.props.x wird zu einer destrukturierten Prop, { x }.
2. Jeder Schlüssel von this.state wird zu einem eigenen useState. Denk daran, dass der Setter ersetzt statt zusammenzuführen.
3. Methoden werden zu einfachen Funktionen in der Komponente. Kein Binden nötig.
4. componentDidMount, componentDidUpdate und componentWillUnmount werden zu useEffect-Aufrufen, gruppiert nach dem, was sie tun, statt danach, wann sie laufen.
5. createRef wird zu useRef, und static contextType mit this.context wird zu useContext oder use.

Lass Error Boundaries als Klassen; für sie gibt es kein Gegenstück als Funktion.

PureComponent

Eine normale Klassenkomponente rendert jedes Mal, wenn ihr Elternteil rendert. PureComponent vergleicht zuerst die neuen Props und den neuen State mit den vorherigen, eine Ebene tief, und überspringt den Render, wenn sich nichts geändert hat. Sie ist das Gegenstück von React.memo für Klassen.

import { Component, PureComponent, useState } from 'react';

class PlainLabel extends Component {
    render() {
        console.log('PlainLabel rendered');
        return <p>Plain: {this.props.text}</p>;
    }
}

class PureLabel extends PureComponent {
    render() {
        console.log('PureLabel rendered');
        return <p>Pure: {this.props.text}</p>;
    }
}

export default function App() {
    const [clicks, setClicks] = useState(0);
    return (
        <div>
            <button onClick={() => setClicks(clicks + 1)}>Re-render the parent ({clicks})</button>
            <PlainLabel text="hello" />
            <PureLabel text="hello" />
        </div>
    );
}

Klicke auf den Button: Nur PlainLabel rendered wird geloggt, weil PureLabel dasselbe text sieht. Übergib beiden text={'hello ' + clicks}, und beide rendern bei jedem Klick.

Der Vergleich ist flach, also hebelt ihn eine Prop aus, die bei jedem Render des Elternteils ein neues Objekt oder eine neue Funktion ist (style={{ color: 'red' }}, onClick={() => ...}). Das ist dieselbe Falle wie bei React.memo.

Was React 19 aus Klassen entfernt hat

Wenn du alten Klassencode pflegst, funktionieren einige Muster in React 19 nicht mehr:

• String-Refs (ref="input" mit this.refs.input). Nutze createRef() oder einen Ref-Callback.
• Legacy Context (contextTypes, childContextTypes, getChildContext). Nutze createContext mit static contextType.
• propTypes werden ignoriert. Nutze TypeScript oder eigene Prüfungen.
• findDOMNode ist weg. Setze stattdessen eine Ref auf das DOM-Element.

Die alten Methoden componentWillMount, componentWillReceiveProps und componentWillUpdate sind ebenfalls Legacy. Sie laufen noch, sowohl unter den alten Namen als auch unter den Namen mit UNSAFE_ (UNSAFE_componentWillMount und so weiter), sind aber veraltet, und StrictMode warnt vor ihnen; verschiebe ihren Code nach componentDidMount, componentDidUpdate oder getDerivedStateFromProps.