Переиспользуемые компоненты

Основы концепции Fresh

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

Создание компонентов

Компонент в Fresh обычно представлен функцией, которая принимает props и возвращает HTML-структуру:

export default function Button({ label, onClick }) {
  return (
    <button onCl ick={onClick} class="btn">
      {label}
    </button>
  );
}

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

  • Props — входные параметры компонента, позволяющие переиспользовать один и тот же компонент с разными данными.
  • Возврат HTML/JSX — структура интерфейса, которая автоматически интегрируется в DOM.
  • Изоляция логики — каждая функция отвечает только за свою часть интерфейса.

Работа с состоянием

Fresh поддерживает реактивное состояние с использованием хуков, аналогичных React. Основной механизм — useState:

import { useState } from "fresh/hooks";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Счётчик: {count}</p>
      <button onCl ick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

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

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

Вложенные и составные компоненты

Компоненты можно вкладывать друг в друга для построения сложного интерфейса:

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

export default function Dashboard() {
  return (
    <section>
      <Card title="Новости" content="Последние события" />
      <Card title="Задачи" content="Список задач на сегодня" />
    </section>
  );
}

Преимущества:

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

Управление событиями

Компоненты в Fresh позволяют привязывать обработчики событий напрямую к элементам:

export default function Toggle() {
  const [isOn, setIsOn] = useState(false);

  const handleClick = () => setIsOn(!isOn);

  return (
    <button onCl ick={handleClick}>
      {isOn ? "Включено" : "Выключено"}
    </button>
  );
}

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

  • Использование стрелочных функций позволяет сохранять контекст компонента.
  • Состояние и события тесно связаны, обеспечивая реактивное поведение интерфейса.

Динамическая загрузка и оптимизация

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

const LazyComponent = await import("./LazyComponent.js");

export default function Page() {
  return (
    <div>
      <h1>Страница с ленивой загрузкой</h1>
      <LazyComponent.default />
    </div>
  );
}

Преимущества динамической загрузки:

  • Снижение времени первой загрузки страницы.
  • Постепенное подключение функционала по мере необходимости.
  • Поддержка современных стандартов JavaScript без сложных инструментов сборки.

Стилизация компонентов

Fresh не навязывает способ стилизации. Возможные подходы:

  • Классы CSS: обычные стили подключаются через классы.
  • CSS Modules: позволяют изолировать стили конкретного компонента.
  • Inline styles: быстрый способ задать стили на уровне JSX.

Пример с CSS Module:

import styles from "./Button.module.css";

export default function Button({ label }) {
  return <button class={styles.primary}>{label}</button>;
}

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

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

Итоговые принципы работы с Fresh

  • Компоненты создаются как чистые функции с реактивным состоянием.
  • Переиспользование достигается через props и составные компоненты.
  • Управление событиями тесно связано с локальным состоянием.
  • Динамическая загрузка позволяет оптимизировать производительность.
  • Стили могут быть изолированными и легко переносимыми между компонентами.

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

Оглавление