PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

Какие возможности React доступны только в классовых компонентах?

Компоненты

После появления хуков (React 16.8) функциональные компоненты закрыли почти весь функционал классовых. По-настоящему эксклюзивным для классов осталось немногое.

Действительно только в классах

Error Boundaries — перехват ошибок рендера дочернего дерева:

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error, info) { logError(error, info); }

  render() {
    return this.state.hasError ? <Fallback /> : this.props.children;
  }
}

Хуков-аналогов componentDidCatch / getDerivedStateFromError нет — на практике берут библиотеку react-error-boundary (внутри которой такой же класс).

getSnapshotBeforeUpdate — прочитать DOM (например, позицию скролла) после рендера, но до применения изменений к DOM; точного функционального эквивалента нет (частично покрывается useLayoutEffect).

Формальные отличия (не преимущества)

  • this с всегда-актуальными this.props/this.state — в функциях каждый рендер замыкает свой «снимок» значений (это осознанное отличие модели, обходится через ref).
  • createRef, инстанс-поля, наследование компонентов — есть только у классов, но паттерны на них считаются устаревшими.

Чего в классах, наоборот, нет

Хуки (useState, useEffect, useContext, кастомные хуки), а с ними — переиспользование логики без HOC-обёрток. Новые возможности React (use, Server Components-паттерны) проектируются под функции.

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

Практически единственное, что доступно только классам, — Error Boundaries (componentDidCatch/getDerivedStateFromError) и метод getSnapshotBeforeUpdate. Всё остальное давно покрыто хуками, поэтому классы пишут только для граничного перехвата ошибок или поддерживают в легаси.

Другие вопросы раздела