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

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

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

Наиболее распространённый способ условного рендеринга — тернарный оператор ? :. Он позволяет включать или исключать элементы на основе логического выражения.

import { h } from 'preact';

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

В этом примере компонент Greeting отображает разные сообщения в зависимости от значения свойства isLoggedIn. Тернарный оператор удобен для коротких условий, когда необходимо выбрать между двумя альтернативами.

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

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

function Notification({ hasNewMessages }) {
  return (
    <div>
      {hasNewMessages && <p>У вас есть новые сообщения</p>}
    </div>
  );
}

Здесь <p> появится только если hasNewMessages истинно. Этот подход уменьшает количество лишнего кода и повышает читаемость при простых условиях.

Условный рендеринг нескольких вариантов

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

function Status({ code }) {
  const renderStatus = () => {
    if (code === 200) return <p>Успех</p>;
    if (code === 404) return <p>Не найдено</p>;
    if (code === 500) return <p>Ошибка сервера</p>;
    return <p>Неизвестный статус</p>;
  };

  return <div>{renderStatus()}</div>;
}

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

Компоненты как условные блоки

В Preact удобно создавать отдельные компоненты для различных состояний. Это повышает модульность и позволяет повторно использовать код.

function Loading() {
  return <p>Загрузка...</p>;
}

function Content({ data }) {
  return <div>{data}</div>;
}

function DataView({ isLoading, data }) {
  return (
    <div>
      {isLoading ? <Loading /> : <Content data={data} />}
    </div>
  );
}

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

Использование массивов и фильтрации

Для динамического отображения списков можно комбинировать условный рендеринг с методами массивов, такими как map и filter.

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

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

Особенности Preact при условном рендеринге

  1. Минимальный размер библиотеки: Preact использует тот же JSX и подходы к условному рендерингу, что и React, но с меньшим размером, что важно для производительности.
  2. Быстрая перерисовка: Preact оптимизирует обновление DOM при изменении условий, что снижает количество ненужных операций.
  3. Поддержка функциональных компонентов: Все методы условного рендеринга полностью совместимы с функциональными компонентами и хуками, такими как useState и useEffect.

Комбинация с хуками

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

import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      {time.getSeconds() % 2 === 0 ? <p>Чётная секунда</p> : <p>Нечётная секунда</p>}
      <p>Текущее время: {time.toLocaleTimeString()}</p>
    </div>
  );
}

В этом примере компонент динамически обновляет отображение текста в зависимости от текущей секунды.

Выводы по использованию

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

Эффективное применение этих подходов обеспечивает модульность, читаемость кода и высокую производительность фронтенд-приложений.

Оглавление