Что такое условный рендеринг в React?

Краткий ответ

Условный рендеринг в React — это отображение различных элементов или компонентов в зависимости от определенного условия. React позволяет использовать стандартные JavaScript-выражения и операторы для управления тем, что отображается на экране.

Основные способы условного рендеринга:

Использование оператора if/else
Тернарный оператор ? :
Логический оператор &&
Условный возврат null
Условное присваивание переменной

Пример с тернарным оператором:

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn 
        ? <h1>Добро пожаловать!</h1>
        : <h1>Пожалуйста, войдите</h1>
      }
    </div>
  );
}

Полный ответ

Условный рендеринг — это мощный паттерн в React, который позволяет отображать различные компоненты или элементы в зависимости от состояния приложения. Это один из фундаментальных концептов для создания динамических интерфейсов. 🧩

Способы условного рендеринга

1. Использование if/else

Классический подход с использованием if/else для определения, что рендерить:

function UserStatus({ isLoggedIn }) {
  if (isLoggedIn) {
    return <div>Пользователь авторизован</div>;
  } else {
    return <div>Пользователь не авторизован</div>;
  }
}

2. Тернарный оператор

Краткий способ встроить условную логику прямо в JSX:

function Button({ isActive }) {
  return (
    <button className={isActive ? 'active' : 'inactive'}>
      {isActive ? 'Активная кнопка' : 'Неактивная кнопка'}
    </button>
  );
}

3. Логический оператор &&

Удобный способ для условного рендеринга одного элемента:

function Notification({ hasMessages }) {
  return (
    <div>
      {hasMessages && <span>У вас есть непрочитанные сообщения</span>}
    </div>
  );
}

4. Условный возврат null

Для полного скрытия компонента можно вернуть null:

function AdminPanel({ isAdmin }) {
  if (!isAdmin) {
    return null;
  }
  
  return <div>Панель администратора</div>;
}

5. Присваивание элементов переменной

Более гибкий подход с использованием переменных:

function LoginControl({ isLoggedIn }) {
  let button;
  
  if (isLoggedIn) {
    button = <LogoutButton />;
  } else {
    button = <LoginButton />;
  }
  
  return (
    <div>
      <div>Статус: {isLoggedIn ? 'Онлайн' : 'Офлайн'}</div>
      {button}
    </div>
  );
}

Сравнение подходов

Метод	Преимущества	Недостатки
if/else	Простой и понятный	Многословный для простых условий
Тернарный оператор	Компактный, встраивается в JSX	Может усложнить чтение при вложенности
&& оператор	Очень краткий для простых условий	Работает только для одного варианта
Возврат null	Полностью скрывает компонент	Не показывает альтернативу
Переменные	Гибкий и читаемый	Требует дополнительного кода

Распространенные ошибки

1. Неправильное использование логического оператора &&

// ❌ Проблемный код
function Counter({ count }) {
  return (
    <div>
      {count && <h1>Счётчик: {count}</h1>}
    </div>
  );
}
// Если count = 0, отобразится "0" вместо заголовка!

Решение:

// ✅ Правильно
function Counter({ count }) {
  return (
    <div>
      {count > 0 && <h1>Счётчик: {count}</h1>}
    </div>
  );
}

2. Сложные условия в JSX

// ❌ Тяжело читать
function Component({ isAuth, isAdmin, hasPermission }) {
  return (
    <div>
      {isAuth && isAdmin ? 
        hasPermission ? <AdminPanel /> : <NoPermission /> 
        : <LoginForm />}
    </div>
  );
}

Решение:

// ✅ Лучше вынести в переменную
function Component({ isAuth, isAdmin, hasPermission }) {
  let content;
  
  if (!isAuth) {
    content = <LoginForm />;
  } else if (isAdmin && hasPermission) {
    content = <AdminPanel />;
  } else {
    content = <NoPermission />;
  }
  
  return <div>{content}</div>;
}

Оптимизация условного рендеринга

1. Используйте ранний возврат

Для сложных компонентов ранний возврат может улучшить читаемость:

function ProfilePage({ user, isLoading, error }) {
  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage message={error} />;
  if (!user) return <NotFound />;
  
  return <UserProfile user={user} />;
}

2. Избегайте излишнего рендеринга

Условный рендеринг может привести к ненужным перерисовкам:

// ❌ Компонент всегда перерисовывается
function Dashboard({ user }) {
  const [activeTab, setActiveTab] = useState('overview');
  
  return (
    <div>
      <Tabs activeTab={activeTab} onChange={setActiveTab} />
      {activeTab === 'overview' && <Overview user={user} />}
      {activeTab === 'settings' && <Settings user={user} />}
      {activeTab === 'profile' && <Profile user={user} />}
    </div>
  );
}

Решение:

// ✅ Объект для хранения компонентов
function Dashboard({ user }) {
  const [activeTab, setActiveTab] = useState('overview');
  
  const tabs = {
    overview: <Overview user={user} />,
    settings: <Settings user={user} />,
    profile: <Profile user={user} />
  };
  
  return (
    <div>
      <Tabs activeTab={activeTab} onChange={setActiveTab} />
      {tabs[activeTab]}
    </div>
  );
}

Резюме

✅ Условный рендеринг в React:

Позволяет отображать различные компоненты в зависимости от условий
Использует стандартные JavaScript-выражения
Можно применять несколько методов: if/else, тернарные операторы, &&, возврат null

✅ Рекомендации:

Используйте тернарный оператор для простых условий
Применяйте переменные или ранний возврат для сложных условий
Избегайте глубокой вложенности условий в JSX
Будьте осторожны с логическим оператором && при работе с числами

Правильное использование условного рендеринга помогает создавать динамичные и адаптивные пользовательские интерфейсы, которые реагируют на действия пользователя и изменение данных. 🚀

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪