Что такое классовые компоненты?

Классовые компоненты — способ объявления компонентов через ES6-классы, наследующие React.Component. До появления хуков (2019) — единственный полноценный вид компонентов.

Устройство

class Counter extends React.Component {
  state = { count: 0 };                      // состояние — объект

  componentDidMount() {                       // жизненный цикл — методы
    console.log('смонтирован');
  }

  handleClick = () => {                       // обработчик — поле класса
    this.setState({ count: this.state.count + 1 }); // обновление с мерджем
  };

  render() {                                  // обязательный метод
    return (
      <button onClick={this.handleClick}>
        {this.props.label}: {this.state.count}
      </button>
    );
  }
}

Основные элементы: props через this.props, состояние в this.state (обновление только через this.setState, который мерджит поля и планирует ререндер), методы жизненного цикла (componentDidMount/DidUpdate/WillUnmount и другие), обязательный render().

Особенности и отличия от функциональных

• setState мерджит объект (у useState сеттер заменяет значение) и рендерит без сравнения значений.
• Проблема this: методы требуют bind или полей-стрелок.
• this.props/this.state всегда «актуальные» — в отличие от замыканий-снимков в функциях.
• Оптимизация — PureComponent/shouldComponentUpdate.
• Переиспользование логики — только HOC/render props (главная причина перехода на хуки).

Статус сегодня

Легаси: новый код пишут на функциях с хуками. Классы остаются в старых кодовых базах и в одном актуальном сценарии — Error Boundaries (componentDidCatch/getDerivedStateFromError не имеют хук-аналогов).

Коротко для собеседования

Классовый компонент — class extends React.Component с render(), this.state/setState (мердж) и методами жизненного цикла. Против функциональных: многословнее, проблемы this, логика размазана по методам, переиспользование только через HOC. Сегодня — легаси плюс единственный живой кейс: Error Boundary.