Если говорить просто, условный рендеринг - это способность вашего React-приложения решать, что именно показывать пользователю в зависимости от определенных условий (состояния, пропсов и т.д.).
Думайте об этом как о "if... else...", но для вашего пользовательского интерфейса (UI).
- ЕСЛИ пользователь вошел в систему, ТО показать компонент
<UserProfile />.- ИНАЧЕ показать компонент
<LoginForm />.💡 Для чего он нужен?
Без условного рендеринга все наши приложения были бы статичными. Именно эта концепция делает интерфейс динамическим, "живым" и отзывчивым.
Он нужен буквально повсюду. Вот самые частые примеры:
- Пока идет загрузка данных с сервера: Мы показываем
<Spinner /> (крутилку). Как только данные пришли — показываем <DataList />.- Аутентификация: Показываем "Профиль", если
isLoggedIn === true, и "Войти", если isLoggedIn === false.- Обработка ошибок: Если при загрузке произошла ошибка, мы показываем
<ErrorMessage /> вместо контента.- Пустые состояния: Показываем "Ваша корзина пуста", если
cart.items.length === 0, и список товаров, если в ней что-то есть.- Интерактив: Показ/скрытие модальных окон, выпадающих меню или вкладок по клику.
🛠️ Как это сделать?
В React есть несколько популярных способов:
1. Тернарный оператор (
? :) - самый частый выбор.{isLoading ? <Spinner /> : <Content />}2. Логический оператор "И" (
&&) - идеален, когда вам нужно что-то показать или не показать ничего (нет ветки "else").{hasMessages && <NotificationBadge />}3. Обычный
if/else - используется внутри тела компонента, до return, для более сложной логики.Условный рендеринг - это не просто "фича", это сам смысл React. Это то, что позволяет вашему UI реагировать на изменения данных и действия пользователя.
#React #JavaScript #Frontend #Development #ConditionalRendering
📲 Мы в MAX
✍️ @React_lib