В чем декларативность в 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-сценариях.