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

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

Использование условных операторов

Наиболее распространённый способ условного рендеринга — применение стандартных условных операторов Jav * aScript: if, else if и else. Они позволяют включать или исключать части интерфейса на основе логических условий.

const isLoggedIn = true;

if (isLoggedIn) {
  console.log("Пользователь вошёл в систему");
} else {
  console.log("Пользователь не авторизован");
}

В контексте веб-разработки условные операторы часто используются для определения, какие компоненты отображать:

const user = { name: "Иван", age: 25 };

function renderUser(user) {
  if (user) {
    return `<h1>Привет, ${user.name}</h1>`;
  } else {
    return `<h1>Гость</h1>`;
  }
}

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

Для краткой записи условного рендеринга применяется тернарный оператор ? :. Он позволяет встроить условие прямо в выражение.

const isAdmin = false;

const message = isAdmin ? "Добро пожаловать, администратор" : "Добро пожаловать, пользователь";
console.log(message);

В JSX (React) тернарный оператор используется непосредственно внутри разметки:

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

Тернарный оператор особенно полезен для простых условий и компактного кода, но при сложной логике лучше использовать if или отдельные функции.

Логическое И (&&) и ИЛИ (||)

Для условного рендеринга без необходимости else удобно использовать логические операторы && и ||.

  • Логическое И (&&) Используется для отображения элемента только при истинном условии:
const isLoggedIn = true;

<div>
  {isLoggedIn && <button>Выйти</button>}
</div>

Если isLoggedIn ложное, кнопка не будет отрендерена.

  • Логическое ИЛИ (||) Позволяет задавать значение по умолчанию, если условие ложное:
const username = null;

const displayName = username || "Гость";
console.log(displayName); // "Гость"

Функциональный подход к условному рендерингу

Для сложных условий и множественных вариантов отображения удобно использовать отдельные функции, возвращающие компоненты:

function renderStatus(status) {
  switch (status) {
    case "loading":
      return <p>Загрузка данных...</p>;
    case "success":
      return <p>Данные успешно загружены</p>;
    case "error":
      return <p>Произошла ошибка</p>;
    default:
      return null;
  }
}

function App({ status }) {
  return (
    <div>
      {renderStatus(status)}
    </div>
  );
}

Такой подход повышает читаемость и позволяет централизованно управлять логикой отображения.

Условный рендеринг списков

При работе с массивами объектов условие может применяться к каждому элементу списка:

const todos = [
  { id: 1, text: "Изучить JavaScript", completed: true },
  { id: 2, text: "Сделать домашнее задание", completed: false },
];

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => 
        todo.completed ? (
          <li key={todo.id}><s>{todo.text}</s></li>
        ) : (
          <li key={todo.id}>{todo.text}</li>
        )
      )}
    </ul>
  );
}

Здесь условие todo.completed определяет, будет ли текст перечеркнут, что наглядно демонстрирует использование условного рендеринга на практике.

Деструктуризация и условный рендеринг

Совмещение деструктуризации с условными выражениями позволяет писать компактный и чистый код:

const user = { name: "Анна", isAdmin: true };

const { name, isAdmin } = user;

<div>
  <h1>Привет, {name}</h1>
  {isAdmin && <p>Вы администратор</p>}
</div>

Такой подход упрощает доступ к данным и минимизирует повторение кода.

Ленивый рендеринг

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

import { Suspense, lazy } from "react";

const LazyComponent = lazy(() => import("./HeavyComponent"));

function App({ show }) {
  return (
    <div>
      {show && (
        <Suspense fallback={<div>Загрузка...</div>}>
          <LazyComponent />
        </Suspense>
      )}
    </div>
  );
}

Это особенно важно в больших приложениях, где тяжелые компоненты не должны грузиться сразу.

Основные принципы

  1. Минимизировать повторение кода — использовать функции и отдельные компоненты для сложных условий.
  2. Предпочитать читаемость — простые тернарные операторы для кратких условий, if или switch для сложных.
  3. Использовать логические операторы — для краткого рендеринга без else.
  4. Разделять логику и разметку — функции для вычисления условий делают код более структурированным и поддерживаемым.

Условный рендеринг обеспечивает гибкость интерфейса и позволяет создавать адаптивные, динамичные веб-приложения с минимальными затратами на сложность кода.

Оглавление