Условный рендеринг
Тема дорожной карты · React
Условный рендеринг в React позволяет компоненту решать, какой JSX выводить, основываясь на состоянии, пропсах или любом JavaScript-выражении, вычисляемом во время рендеринга. Поскольку React-компоненты — это просто функции, возвращающие JSX, можно использовать стандартные конструкции JavaScript: операторы if, тернарные операторы или оператор && для включения или исключения частей UI. Условный рендеринг лежит в основе динамических фронтенд-интерфейсов: переключение состояния входа/выхода, индикаторы загрузки, контент с ограниченным доступом. React вычисляет эти условия при каждом цикле рендеринга, поэтому отображаемый результат автоматически синхронизируется с текущим состоянием компонента. Понимание условного рендеринга — обязательное условие для работы с хуками React, такими как useState и useEffect, которые управляют изменениями состояния, запускающими эти условия.
Как это работает
Условный рендеринг — это JavaScript с XML-разметкой внутри выражений. Компилятор Babel/SWC превращает <div className="x">{value}</div> в React.createElement("div", {className: "x"}, value). Фигурные скобки {} переключают между JSX и JavaScript-выражениями. Атрибуты пишут camelCase (onClick, className) — JSX это JavaScript, не HTML. Условный рендер — тернарники или &&; списки — .map() со стабильным key для reconciliation.
Когда применять
JSX — для render-вывода каждого компонента: идиоматичный React. Альтернатива (React.createElement) работает, но читается хуже на нетривиальном UI. Используйте && для "рендерить X, если условие"; тернарники для "рендерить X или Y"; никогда || для conditional render (0 || <X/> рендерит 0, не <X/>). Используйте Fragment (<>...</>), когда возвращаете несколько siblings без лишнего wrapper div.
Типичные ошибки
Ловушки Условный рендеринг: for вместо htmlFor и class вместо className (HTML-привычки утекают); рендер массивов без стабильного key (React предупреждает; переупорядочивание ломает DOM); индекс массива как key при переупорядочивании (state приписывается не туда); тяжёлые вычисления прямо в JSX (пересчитываются каждый рендер — выносите в useMemo или helper). Мысленно «разворачивайте» JSX в createElement, чтобы дебажить рендер-баги.