Композиция компонентов

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

Компоненты в Fresh

Компонент в Fresh — это функция, которая возвращает JSX-структуру. Компоненты бывают классические и островные (islands). Островные компоненты позволяют использовать интерактивность на клиенте только там, где это необходимо, сохраняя остальную часть страницы статичной.

export default function Header() {
  return (
    <header>
      <h1>Fresh Example</h1>
    </header>
  );
}

Ключевые моменты:

  • Компоненты не имеют собственного состояния на сервере; состояние управляется через props.
  • Все компоненты рендерятся на сервере по умолчанию.
  • Интерактивные компоненты помечаются директивой client:.

Принципы композиции компонентов

Композиция компонентов — это способ объединять простые компоненты для создания сложных интерфейсов. Fresh поддерживает:

  1. Вложенные компоненты
  2. Композицию через props
  3. Использование островных компонентов для интерактивности
Вложенные компоненты

Компоненты могут содержать другие компоненты, передавая им данные через props:

function Button({ label }) {
  return <button>{label}</button>;
}

export default function Page() {
  return (
    <div>
      <h2>Добро пожаловать</h2>
      <Button label="Кликни меня" />
    </div>
  );
}

Особенность Fresh в том, что даже при глубокой вложенности рендеринг остаётся оптимизированным, так как сервер отдаёт уже готовый HTML.

Композиция через props

Props позволяют передавать данные и функции между компонентами. Это ключевой инструмент для создания переиспользуемых компонентов.

function Card({ title, content }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{content}</p>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Card title="Первая карточка" content="Содержимое карточки" />
      <Card title="Вторая карточка" content="Ещё одна карточка" />
    </div>
  );
}

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

Островные компоненты

Fresh позволяет добавлять интерактивность только там, где она нужна. Для этого используется директива client:. Такие компоненты рендерятся на сервере, но получают возможность работать на клиенте с JavaScript.

/** @jsx h */
import { h } from "preact";

export default function Counter() {
  let count = 0;
  return (
    <button client:load onCl ick={() => count++}>
      {count}
    </button>
  );
}

Особенности:

  • Подключение интерактивного поведения не нагружает весь клиентский код страницы.
  • Можно комбинировать серверные и клиентские компоненты на одной странице без дублирования логики.

Практические приёмы композиции

  1. Контейнерные компоненты — оборачивают дочерние компоненты, передавая им контекстные данные. Используются для layout и общей логики.
function Layout({ children }) {
  return (
    <main>
      <header>Header</header>
      {children}
      <footer>Footer</footer>
    </main>
  );
}

export default function Home() {
  return (
    <Layout>
      <p>Главный контент страницы</p>
    </Layout>
  );
}
  1. Композиция с массивами — рендеринг списков компонентов через map.
const items = ["Яблоко", "Банан", "Вишня"];

export default function List() {
  return (
    <ul>
      {items.map(item => (
        <li>{item}</li>
      ))}
    </ul>
  );
}
  1. Композиция функций — передача функций для обработки событий и управления состоянием. Позволяет создавать высокоабстрактные компоненты.
function Toggle({ onToggle }) {
  return <button onCl ick={onToggle}>Переключить</button>;
}

export default function App() {
  const handleToggle = () => console.log("Переключено");
  return <Toggle onTog gle={handleToggle} />;
}

Оптимизация при композиции

  • Использование серверного рендеринга снижает время до первого отображения.
  • Минимизация интерактивных островов уменьшает объём клиентского кода.
  • Передача только необходимых props предотвращает лишние перерендеры.

Итоговые рекомендации по структуре

  • Создавать небольшие, атомарные компоненты.
  • Комбинировать их через вложенность и props.
  • Использовать островные компоненты только для интерактивности.
  • Разделять layout и контент для повышения переиспользуемости.

Композиция компонентов в Fresh строится вокруг чистоты, повторного использования и оптимизации. Она позволяет создавать сложные интерфейсы с минимальными затратами ресурсов и высокой производительностью.

Оглавление