React.Component — классовые компоненты и как они работают

Что такое React.Component?

React.Component — абстрактный класс, который предоставляет встроенные методы для работы с состоянием, пропсами и жизненным циклом компонента. Чтобы создать классовый компонент, нужно определить класс, наследующий от React.Component, и реализовать метод render.

React.Component появился в самой первой версии React (2013) и оставался основным способом создания компонентов на протяжении пяти лет. Экосистема React строилась вокруг классов: компоненты высшего порядка (HOC), render props, контекст — все эти паттерны были реализованы через классовый синтаксис.

С выходом React 16.8 в 2019 году команда React представила хуки как альтернативу классам. Хуки решали те же задачи — состояние, эффекты, контекст — но без наследования и сложной привязки контекста. React.Component остаётся полностью поддерживаемым, но для новых проектов рекомендуется функциональный подход.

Создание классового компонента

Минимальный классовый компонент — класс с единственным методом render, возвращающим React-элемент. render — единственный обязательный метод. Он должен быть чистой функцией от this.props и this.state: один и тот же набор пропсов и состояния даёт одинаковый результат.

import React, { Component } from 'react';

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

Конструктор и инициализация состояния

Конструктор выполняется перед монтированием. В нём вызывается super(props) для передачи пропсов в родительский класс и инициализируется this.state. Использовать конструктор для других целей — подписки, вызовы API — не рекомендуется: для этого есть componentDidMount.

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

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

Управление состоянием через this.state и this.setState

this.state — объект, содержащий данные компонента. Изменять его напрямую (this.state.count = 1) запрещено — это не вызывает ререндер и ломает предсказуемость. Обновлять состояние нужно через this.setState, который создаёт новый объект состояния и запускает повторный рендер.

setState может принимать объект или функцию. Функциональная форма предпочтительна, когда новое состояние зависит от предыдущего: this.setState(prev => ({ count: prev.count + 1 })). React может группировать несколько setState в один батч для оптимизации производительности.

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

Важное свойство setState — он асинхронный. После вызова setState состояние не обновляется мгновенно. Если нужно выполнить действие после обновления, передайте колбэк вторым аргументом: this.setState(newState, () => console.log(this.state)).

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

Классовые компоненты имеют предопределённые методы, которые React вызывает в определённые моменты. Монтирование — constructor → render → componentDidMount. Обновление — render → componentDidUpdate. Размонтирование — componentWillUnmount.

ComponentDidMount — запрос данных

componentDidMount — основное место для побочных эффектов после первого рендера. Здесь выполняются HTTP-запросы, устанавливаются WebSocket-соединения и стартуют таймеры. Если не очистить подписку в componentWillUnmount, возникает утечка памяти.

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

Привязка контекста this в методах

В JavaScript методы класса по умолчанию не привязаны к экземпляру. Если передать метод как колбэк — в обработчик события, в таймер — this будет undefined (в strict mode) или window (без strict mode). Без привязки this.setState выбросит ошибку.

Существует три способа привязки: bind в конструкторе, стрелочная функция в колбэке и class field со стрелочной функцией. Первый способ — официальная рекомендация React: bind один раз в конструкторе, без пересоздания функции на каждый рендер.

// 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 field — современный синтаксис с автоматической привязкой. Стрелочная функция в свойстве класса захватывает this из области видимости конструктора. Недостаток — метод создаётся на каждому экземпляре, а не на прототипе, что увеличивает память для сотен компонентов одного типа.

Сравнение классовых и функциональных компонентов

Выбор между классом и функцией — не только вопрос синтаксиса. Функциональные компоненты с хуками решают проблемы, присущие классам: дублирование логики в разных lifecycle-методах (componentDidMount + componentDidUpdate), сложность с this и невозможность извлечь связанную логику в переиспользуемый блок.

Функциональные компоненты легче тестировать — они не имеют внутреннего состояния (которое до хуков было только в классах) и не требуют монтирования в DOM для проверки колбэков. React рекомендует функциональные компоненты для всех новых проектов, документация и примеры пишутся на них.

Классовые компоненты остаются лучшим выбором при работе с легаси-кодом. Если проект начат до 2019 года, в нём, вероятно, тысячи классовых компонентов. Переписывать их все на хуки за один спринт — рискованно. React гарантирует обратную совместимость: классовые компоненты не будут удалены.

Стратегия миграции с классов на хуки

Постепенная миграция начинается с анализа компонента. Простые компоненты без состояния (stateless) переводятся первыми — они тривиально заменяются функциями. Затем — компоненты с одним-двумя state-полями, где useState напрямую заменяет this.state и this.setState.

Сложные компоненты с множеством lifecycle-методов переводятся через useEffect. Логика из componentDidMount + componentDidUpdate разбивается на отдельные useEffect с разными зависимостями. componentWillUnmount заменяется return-функцией внутри useEffect. Для сложной логики состояния используйте useReducer.

Инструменты автоматической миграции — @phenomnomnominal/ts-react-class-to-hook или codemod-скрипты — могут автоматически конвертировать простые классы. Для сложных случаев миграция остаётся ручной работой, требующей понимания логики исходного компонента.