Общие библиотеки и зависимости

Preact — это лёгкий и быстрый альтернативный фреймворк для создания интерфейсов, совместимый с экосистемой React, но с меньшим размером и упрощённой архитектурой. Работа с Preact часто подразумевает использование сторонних библиотек и зависимостей для расширения функциональности и интеграции с современными инструментами разработки.

Основные зависимости Preact

  1. preact Основной пакет, реализующий виртуальный DOM и компонентную модель. Предоставляет базовые функции:

    • h() — создание виртуальных узлов.
    • Component — базовый класс для классовых компонентов.
    • render() — рендеринг компонентов в DOM.

  2. preact/hooks Поддержка хуков, аналогичных React. Позволяет управлять состоянием и жизненным циклом компонентов через функциональные конструкции:

    • useState() — локальное состояние компонента.
    • useEffect() — побочные эффекты.
    • useRef() — сохранение ссылок на DOM-элементы или значения между рендерами.
    • useContext() — доступ к контексту.

  3. preact/compat Совместимость с библиотеками, написанными для React. Позволяет использовать существующие пакеты из экосистемы React без переписывания кода. Чаще всего применяется вместе с alias в сборщиках типа Webpack или Vite:

    resolve: {
    alias: {
        react: 'preact/compat',
        'react-dom': 'preact/compat'
    }
}

Инструменты сборки и зависимости

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

  1. Webpack Позволяет организовать модульную структуру проекта, подключать стили и изображения, оптимизировать сборку. Важные плагины для Preact:

    • babel-loader — транспиляция современного JavaScript/JSX.
    • html-webpack-plugin — генерация HTML-файла с подключёнными скриптами.

  2. Vite Быстрый инструмент сборки, поддерживающий Preact из коробки через плагин @preact/preset-vite. Обеспечивает мгновенную перезагрузку модулей (HMR) и минимизацию сборки.

  3. Babel Транспиляция JSX в вызовы h() для Preact. Конфигурация включает пресет @babel/preset-env и плагин @babel/plugin-transform-react-jsx с указанием pragma: 'h'.

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

Хотя Preact предоставляет базовые хуки, для сложных приложений часто применяются сторонние библиотеки:

  • Redux или zustand — управление глобальным состоянием.
  • Preact Signals — реактивные сигналы для оптимизации рендеринга, встроенные в современный Preact.

Пример использования сигналов:

import { useSignal } from '@preact/signals';

const counter = useSignal(0);

function Counter() {
    return (
        <button onCl ick={() => counter.value++}>
            {counter.value}
        </button>
    );
}

Работа с маршрутизацией

Preact не содержит встроенного роутера. Для навигации применяются внешние пакеты:

  • preact-router — лёгкий и простой роутер, поддерживает динамические сегменты URL, вложенные маршруты и хуки навигации.
  • wouter — минималистичный роутер с поддержкой хуков и ленивой загрузки компонентов.

Пример маршрутизации с preact-router:

import Router from 'preact-router';
import Home from './pages/Home';
import About from './pages/About';

function App() {
    return (
        <Router>
            <Home path="/" />
            <About path="/about" />
        </Router>
    );
}

Подключение стилей и UI-библиотек

  1. CSS и CSS-in-JS

    • Можно использовать обычные CSS-файлы, SCSS или PostCSS.
    • Для динамического управления стилями подходят библиотеки типа styled-components через preact/compat.

  2. UI-библиотеки

    • Material-UI или Chakra UI — через preact/compat.
    • Лёгкие Preact-ориентированные библиотеки: preact-material-components, preact-mdc.

Оптимизация и производительность

Для оптимальной работы Preact-приложений применяются дополнительные зависимости:

  • preact-cli — генератор проектов с оптимизированной сборкой и поддержкой SSR.
  • preact-render-to-string — серверный рендеринг компонентов.
  • compression, terser, esbuild — для минимизации размера сборки и ускорения загрузки.

Использование сигналов и мемоизации компонентов (memo) снижает количество лишних рендеров:

import { memo } from 'preact/compat';

const ExpensiveComponent = memo(({ data }) => {
    // тяжелая отрисовка
});

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

  • npm или pnpm — менеджеры пакетов для установки Preact и сторонних библиотек.
  • package.json — контроль версий, скриптов сборки и зависимостей.
  • lock-файлы (package-lock.json, pnpm-lock.yaml) обеспечивают стабильные сборки.

Современные проекты Preact обычно включают минимальный набор зависимостей: основной Preact, роутер, хуки и инструменты сборки. Остальные пакеты добавляются по необходимости, учитывая совместимость через preact/compat.

Эта структура зависимостей и библиотек обеспечивает лёгкость, скорость и масштабируемость приложений на Preact, позволяя использовать преимущества как нативного фреймворка, так и богатой экосистемы React.

Оглавление