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

Чего не было в функциональных компонентах что было в классовых в React?

Компоненты

До React 16.8 функциональные компоненты были сильно ограничены, из-за чего их называли «глупыми» (stateless/presentational).

Чего не было в функциональных компонентах до хуков

  • Состояния — никакого аналога this.state/setState; любые данные — только через props. Компонент с состоянием приходилось переписывать в класс.
  • Жизненного цикла — ни componentDidMount, ни DidUpdate, ни WillUnmount: нельзя было загрузить данные, подписаться, завести таймер.
  • Ссылок на инстанс — нет this, нет инстанс-полей для хранения значений между рендерами (таймеры, флаги).
  • Оптимизаций — shouldComponentUpdate/PureComponent были только у классов (React.memo появился в 16.6).
  • Error Boundaries — componentDidCatch только в классах.
  • Контекста в удобном виде — contextType/consumer-паттерны тяготели к классам.

Функциональные компоненты были чистыми функциями «props → JSX» для презентационного слоя, а вся логика жила в классах-контейнерах.

Что изменили хуки (16.8)

  • useState/useReducer — состояние;
  • useEffect/useLayoutEffect — жизненный цикл;
  • useRef — «инстанс-поля»;
  • React.memo (+ useMemo/useCallback) — оптимизации;
  • useContext — контекст.

Что осталось только в классах и сегодня

Error Boundaries (componentDidCatch/getDerivedStateFromError) и getSnapshotBeforeUpdate — единственные «классовые» возможности без прямых аналогов в хуках.

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

До хуков функциональные компоненты не имели state, жизненного цикла, ссылок на «инстанс», оптимизаций и перехвата ошибок — были чисто презентационными. Хуки закрыли всё, кроме Error Boundaries и getSnapshotBeforeUpdate, которые и сейчас требуют класс.

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