Классовые компоненты React: state, жизненный цикл, переход

Классовый компонент это класс JavaScript, который наследует React.Component и возвращает JSX из метода render(). Он читает пропсы из this.props, хранит состояние в this.state и обновляет его через this.setState(). В новом коде их заменили функциональные компоненты с хуками, но классы по-прежнему полностью поддерживаются, встречаются во многих старых проектах и остаются единственным способом написать границу ошибок.

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>
    );
}

Каждый счётчик хранит своё состояние. Добавьте третий <Counter label="Plums" />, и он тоже начнёт с 0.

Устройство классового компонента

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>;
    }
}

• Класс наследует Component (или React.Component с import React from 'react').
• render() обязателен. Он должен быть чистым, как тело функционального компонента: читать this.props и this.state и возвращать JSX.
• this.props хранит пропсы. Они доступны только для чтения.
• Состояние можно задать в constructor (сначала вызовите super(props)) или, как сейчас чаще, полем класса: state = { visits: 1 };.
• static defaultProps по-прежнему работает для классов в React 19 (его убрали только для функциональных компонентов).

this.setState объединяет и может принимать функцию обновления

setState делает две вещи иначе, чем сеттер useState. Он объединяет переданный объект с текущим состоянием, поэтому вы обновляете только названные ключи. И, как любое обновление состояния в React, он применяется не сразу, поэтому используйте форму с функцией обновления, когда следующее значение зависит от предыдущего.

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» добавляет один, потому что все три вызова читают одно и то же this.state.likes. «+3 with updaters» добавляет три. «Move to Paris» сохраняет name и likes (объединение), но теряет zip, потому что объединение работает только на один уровень. Напишите address: { ...this.state.address, city: 'Paris' }, чтобы его сохранить. Необязательный второй аргумент setState выполняется после обновления, и там консоль показывает новый адрес.

Привязка обработчиков событий

Метод, переданный как onClick={this.handleClick}, позже вызывается как обычная функция, без своего объекта, поэтому this внутри него равен 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 />;
}

Первая кнопка выводит TypeError о чтении setState у undefined. Вторая работает, потому что стрелочная функция в поле класса захватывает this при создании экземпляра. Более старое решение, которое всё ещё часто встречается в унаследованном коде, привязывает в конструкторе:

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

Стрелка прямо в строке, onClick={() => this.handleClick()}, тоже работает.

Методы жизненного цикла

Классы реагируют на монтирование, обновление и размонтирование через методы с фиксированными именами. Чаще всего вы увидите эти:

• componentDidMount(): после того как первый рендер оказался в DOM. Запускайте таймеры, подписки, запросы.
• componentDidUpdate(prevProps, prevState): после каждого обновления. Сравнивайте с предыдущими значениями, прежде чем что-то делать, иначе получите цикл.
• componentWillUnmount(): перед удалением. Отмените то, что запустил componentDidMount.
• shouldComponentUpdate(nextProps, nextState): верните false, чтобы пропустить рендер.

Страница о жизненном цикле компонента содержит полный список, порядок выполнения и компонент, который выводит каждый метод.

Перевод класса в функциональный компонент

Вот класс, который использует все три распространённых метода жизненного цикла. Он тикает каждую секунду, выводит сообщение, когда меняется его пропс label, и останавливает таймер при удалении.

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>
    );
}

А вот тот же компонент в виде функции. Каждый метод жизненного цикла становится частью эффекта, а связанные настройка и очистка стоят рядом, а не в двух разных методах.

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>
    );
}

Оба таймера считают одинаково и выводят сообщение при каждой смене подписи. Версия-функция также выводит сообщение один раз при монтировании, потому что эффект выполняется и после первого рендера. Шаги для любого перевода:

1. this.props.x становится деструктурированным пропсом, { x }.
2. Каждый ключ this.state становится отдельным useState. Помните, что сеттер заменяет, а не объединяет.
3. Методы становятся обычными функциями внутри компонента. Привязка не нужна.
4. componentDidMount, componentDidUpdate и componentWillUnmount становятся вызовами useEffect, сгруппированными по тому, что они делают, а не по тому, когда выполняются.
5. createRef становится useRef, а static contextType с this.context становится useContext или use.

Границы ошибок оставьте классами; функционального эквивалента у них нет.

PureComponent

Обычный классовый компонент рендерится каждый раз, когда рендерится его родитель. PureComponent сначала сравнивает новые пропсы и состояние с предыдущими на один уровень вглубь и пропускает рендер, когда ничего не изменилось. Это классовый аналог React.memo.

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>
    );
}

Нажмите кнопку: выводится только PlainLabel rendered, потому что PureLabel видит тот же text. Передайте text={'hello ' + clicks} обоим, и оба будут рендериться при каждом клике.

Сравнение поверхностное, поэтому пропс, который при каждом рендере родителя становится новым объектом или функцией (style={{ color: 'red' }}, onClick={() => ...}), сводит его на нет. Это та же ловушка, что и с React.memo.

Что React 19 убрал из классов

Если вы поддерживаете старый код на классах, несколько шаблонов в React 19 больше не работают:

• Строковые рефы (ref="input" с this.refs.input). Используйте createRef() или ref-колбэк.
• Устаревший контекст (contextTypes, childContextTypes, getChildContext). Используйте createContext со static contextType.
• propTypes игнорируются. Используйте TypeScript или собственные проверки.
• findDOMNode больше нет. Вместо этого ставьте ref на элемент DOM.

Старые методы componentWillMount, componentWillReceiveProps и componentWillUpdate тоже устарели. Они всё ещё выполняются, и под старыми именами, и под именами с UNSAFE_ (UNSAFE_componentWillMount и так далее), но объявлены устаревшими, и StrictMode о них предупреждает; перенесите их код в componentDidMount, componentDidUpdate или getDerivedStateFromProps.