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

Условный рендеринг (conditional rendering) позволяет динамически управлять отображением элементов пользовательского интерфейса (UI) или контента в зависимости от заданных условий. Чаще всего он применяется в программировании для показа или скрытия элементов в зависимости от действий пользователя, состояний данных или статуса системы. Такая техника улучшает взаимодействие с приложением, гарантируя, что в каждый момент времени отображается только релевантная информация.

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

Условный рендеринг в React работает аналогично условным конструкциям в JavaScript. Он позволяет компонентам отображать разные результаты в зависимости от состояний (state) или свойств (props). Благодаря этому интерфейс обновляется динамически, опираясь на логику, а не на ручное изменение DOM.

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

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

Операторы if/else позволяют отображать разные компоненты в зависимости от условия. Этот способ удобен при наличии сложной логики.

function Item({ name, isPacked }) {
    if (isPacked) {
        return <li className="item">{name} ✅</li>;
    }
    return <li className="item">{name}</li>;
}

• Если isPacked равно true, отображается: Space Suit ✅
• Если isPacked равно false, отображается: Space Suit

2. Использование тернарного оператора

Тернарный оператор (condition ? expr1 : expr2) — это компактный способ условного отображения JSX-элементов. Его часто применяют при простых условиях с двумя вариантами вывода.

function Greeting({ isLoggedIn }) {
    return <h1>{isLoggedIn ? "Welcome Back!" : "Please Sign In"}</h1>;
}

• Если isLoggedIn равно true: Welcome Back!
• Если isLoggedIn равно false: Please Sign In

3. Использование логического оператора AND (&&)

Оператор && возвращает второй операнд, если первый истинный (true), и ничего, если первый — ложный (false). Это удобно, когда нужно отобразить элемент только при выполнении условия.

function Notification({ hasNotifications }) {
    return <div>{hasNotifications && <p>You have new notifications!</p>}</div>;
}

• Если hasNotifications равно true: You have new notifications!
• Если hasNotifications равно false: ничего не отображается

4. Использование оператора switch

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

function StatusMessage({ status }) {
    switch (status) {
        case 'loading':
            return <p>Loading...</p>;
        case 'success':
            return <p>Data loaded successfully!</p>;
        case 'error':
            return <p>Error loading data.</p>;
        default:
            return <p>Unknown status</p>;
    }
}

• Если status равно ‘loading’: Loading…
• Если status равно ‘success’: Data loaded successfully!
• Если status равно ‘error’: Error loading data.

5. Условный рендеринг в списках (с помощью .map())

Условный рендеринг полезен при отображении списков элементов с фильтрацией. Можно пройтись по массиву методом .map() и отобразить компоненты, удовлетворяющие условию.

const items = ["Apple", "Banana", "Cherry"];
const fruitList = items.map((item, index) =>
    item.includes("a") ? <p key={index}>{item}</p> : null
);

Если элемент содержит букву «a», он будет отображён [пример с фруктами на русском языке].

6. Условный рендеринг с использованием состояния компонента

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

Синтаксис:

if (loading) {
  // Рендер компонента загрузки
} else {
  // Рендер компонента с данными
}

Практические случаи использования условного рендеринга

1. Отображение профиля пользователя в зависимости от авторизации

Можно условно показывать страницу профиля пользователя, если он вошёл в систему, или форму входа, если нет.

import React, { useState } from 'react';

function App() {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    return (
        <div>
            {isAuthenticated ? (
                <h1>User Profile</h1>
            ) : (
                <button onClick={() => setIsAuthenticated(true)}>Log In</button>
            )}
        </div>
    );
}

export default App;

Результат работы:

• Компонент использует хук useState для управления состоянием isAuthenticated, которое изначально равно false.
• Состояние isAuthenticated определяет, что отображать: если false, показывается кнопка «Log In»; если true — заголовок «User Profile».
• При клике на кнопку «Log In» вызывается setIsAuthenticated(true), что обновляет состояние и запускает повторный рендер.
• После обновления состояние кнопка заменяется заголовком «User Profile», демонстрируя условный рендеринг на основе статуса авторизации.

2. Отображение состояния загрузки

Можно показывать индикатор загрузки или сообщение, пока данные загружаются.

import React, { useState, useEffect } from 'react';

function App() {
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState(null);

    useEffect(() => {
        setTimeout(() => {
            setData('Fetched Data');
            setIsLoading(false);
        }, 2000);
    }, []);

    return (
        <div>
            {isLoading ? (
                <h1>Loading...</h1>
            ) : (
                <h1>{data}</h1>
            )}
        </div>
    );
}

export default App;

Результат работы:

• Компонент использует useState для двух состояний: isLoading (сначала true) и data (сначала null).
• Хук useEffect выполняется один раз после монтирования компонента и запускает setTimeout, имитируя загрузку данных за 2 секунды.
• По окончании таймаута вызывается setData('Fetched Data'), обновляющее состояние data, и setIsLoading(false), выключающее состояние загрузки.
• Изначально отображается «Loading…», после обновления состояния отображается «Fetched Data».

Вопросы производительности при условном рендеринге

• Избегайте ненужных повторных рендеров: используйте React.memo() или shouldComponentUpdate(), чтобы предотвратить лишнюю отрисовку.
• Отложенная загрузка компонентов: применяйте React.lazy() для динамической загрузки компонентов только по необходимости.
• Короткое замыкание (&&) полезно, но требует осторожности: убедитесь, что первый операнд всегда булевый, иначе могут отображаться неожиданные значения.

Рекомендации по условному рендерингу

• Сохраняйте простоту: избегайте глубоко вложенных условий, так как это снижает читаемость и усложняет поддержку. Используйте тернарные операторы или вспомогательные функции.
• Ранние возвраты: рассмотрите возможность применять ранние return для обработки условий в начале функции, особенно если условий несколько.
• Компонентный подход: если логика условного рендеринга сложная, разделяйте её на мелкие компоненты для улучшения читаемости и повторного использования.