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

Условный рендеринг в Atomico позволяет изменять вывод компонентов в зависимости от состояния данных или пропсов. В отличие от классических фреймворков, Atomico использует декларативный подход с JSX-подобным синтаксисом и реактивными хуками, что делает условные конструкции лаконичными и гибкими.

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

Наиболее простой способ условного рендеринга — тернарный оператор внутри JSX. Например:

import { c, useState } from "atomico";

function MyComponent() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return c(
        "div",
        null,
        isLoggedIn ? c("p", null, "Добро пожаловать!") : c("p", null, "Пожалуйста, войдите")
    );
}

customElements.define("my-component", MyComponent);

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

Условное отображение элементов через логическое И

Если нужно рендерить элемент только при определённом условии, удобнее использовать логический оператор &&:

c("div", null,
    isLoggedIn && c("button", { onclick: () => setIsLoggedIn(false) }, "Выйти")
)

Элемент button появится только тогда, когда isLoggedIn истинно. Если условие ложное, возвращается false, и элемент не рендерится.

Использование функций для сложной логики

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

function renderMessage(isLoggedIn) {
    if (isLoggedIn) {
        return c("p", null, "Добро пожаловать!");
    }
    return c("p", null, "Пожалуйста, войдите");
}

function MyComponent() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return c("div", null, renderMessage(isLoggedIn));
}

Такой подход особенно полезен при множественных ветвлениях и сложных UI-структурах.

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

Atomico позволяет легко интегрировать условный рендеринг при работе с массивами элементов. Например, отображение списка уведомлений только если они существуют:

const notifications = ["Сообщение 1", "Сообщение 2"];

c("ul", null,
    notifications.length
        ? notifications.map(msg => c("li", null, msg))
        : c("li", null, "Нет уведомлений")
)

Важно: метод map в JSX возвращает массив элементов, который Atomico корректно рендерит. Пустые массивы или null не вызывают ошибок.

Рендеринг на основе нескольких условий

Для ситуаций с несколькими условиями удобно использовать switch или цепочки if внутри вспомогательной функции:

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

Использование такой функции упрощает поддержку кода и делает условные ветвления наглядными.

Реактивный рендеринг с хуками

Atomico поддерживает реактивные хуки, что позволяет автоматически обновлять UI при изменении состояния. Комбинация useState и условного рендеринга обеспечивает динамическое управление отображением компонентов:

function ToggleComponent() {
    const [isVisible, setIsVisible] = useState(true);

    return c(
        "div",
        null,
        c("button", { onclick: () => setIsVisible(!isVisible) }, "Переключить"),
        isVisible && c("p", null, "Элемент видим")
    );
}

Каждое изменение состояния isVisible автоматически обновляет DOM без дополнительных действий.

Ленивая отрисовка компонентов

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

function LazyComponent({ show }) {
    if (!show) return null;
    return c("div", null, "Тяжелый компонент");
}

В сочетании с useState или useEffect это позволяет экономить ресурсы и ускорять загрузку страницы.

Совмещение нескольких техник

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

Оглавление