PassFront
  1. PassFront
  2. База знаний
  3. Основы React

В чем декларативность в React?

Основы React

Декларативность React — в том, что разработчик описывает как UI выглядит для данного состояния, а не какие шаги выполнить, чтобы привести страницу к нужному виду.

Императивно против декларативно

Императивный подход (vanilla/jQuery) — команды:

if (unread > 0) {
  badge.style.display = 'block';
  badge.textContent = String(unread);
} else {
  badge.style.display = 'none';
}
// и не забыть вызвать это при КАЖДОМ изменении unread

Декларативный (React) — описание результата:

const Badge = ({ unread }) =>
  unread > 0 ? <span className="badge">{unread}</span> : null;

Описаны все состояния UI как функция данных; переходы между ними — работа React (рендер, дифф, точечные правки DOM).

Что это даёт

  • Нет рассинхронизации: невозможно «забыть обновить» кусок интерфейса — он пересчитывается из состояния всегда.
  • Читаемость: по коду видно, как выглядит UI в каждом состоянии, а не разбросанные по обработчикам мутации.
  • Предсказуемость и тестируемость: одно состояние → один результат; рендер — чистая функция.
  • Меньше кода переходов: n состояний требуют n описаний, а не n×n переходов.

Где проходит граница

Декларативность распространяется и глубже разметки: списки — items.map(...) вместо циклов с appendChild; условия — тернарники/&& вместо show/hide; даже «ожидание» — Suspense вместо ручных флагов. Императивные вкрапления остаются точечно — ref для фокуса/скролла/интеграций.

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

Декларативность: UI = f(state) — описываем результат для каждого состояния, а не последовательность DOM-манипуляций; переходы вычисляет React через Virtual DOM. Выгоды: невозможность рассинхрона, читаемость всех состояний из кода, предсказуемость. Императив остаётся только в ref-сценариях.

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