Composition API паттерны

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

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

Создание состояния с createState

Inferno предоставляет функцию createState, позволяющую создавать локальное состояние компонента. Это аналог useState в React, но с высокой производительностью благодаря оптимизированному механизму рендеринга Inferno.

import { createState } from 'inferno';

function useCounter(initialValue = 0) {
  const [count, setCount] = createState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

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

  • Состояние создаётся через деструктуризацию [state, setState].
  • Изменения состояния автоматически инициируют минимальный необходимый ререндер.
  • Возможность объединять несколько хуков состояния для сложной логики.

Побочные эффекты с useEffect

Для управления побочными эффектами используется useEffect. Он позволяет подписываться на события, выполнять асинхронные операции и очищать ресурсы при демонтировании.

import { useEffect } from 'inferno';

function useTimer(callback, delay) {
  useEffect(() => {
    const id = setInterval(callback, delay);
    return () => clearInterval(id);
  }, [delay]);
}

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

  • Массив зависимостей [dep1, dep2] ограничивает срабатывание эффекта только при изменении этих значений.
  • Возвращаемая функция используется для очистки ресурсов при демонтировании или изменении зависимостей.
  • Поддержка асинхронных операций без блокировки UI.

Вычисляемые свойства через computed

Для оптимизации вычислений и предотвращения лишних пересчётов состояния применяются вычисляемые свойства. В Inferno это можно реализовать через функции, которые зависят от состояния:

import { createState } from 'inferno';

function useFullName(firstName, lastName) {
  return () => `${firstName()} ${lastName()}`;
}

const [firstName, setFirstName] = createState('John');
const [lastName, setLastName] = createState('Doe');
const fullName = useFullName(firstName, lastName);

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

  • Функция computed (или её аналог) позволяет возвращать значение, автоматически обновляющееся при изменении зависимых состояний.
  • Уменьшает количество ререндеров и повышает производительность.

Комбинирование Composition API функций

Composition API позволяет объединять несколько хуков в один компонент без потери читаемости:

function useCounterWithTimer(initialValue = 0, delay = 1000) {
  const { count, increment } = useCounter(initialValue);

  useTimer(() => {
    increment();
  }, delay);

  return { count, increment };
}

Ключевые преимущества:

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

Передача состояния между компонентами

Composition API поддерживает передачу состояния и логики через обычные функции:

function useSharedState() {
  const [value, setValue] = createState(0);
  return { value, setValue };
}

function ComponentA({ shared }) {
  return ;
}

function ComponentB({ shared }) {
  return ;
}

const shared = useSharedState();
;
;

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

  • Общее состояние можно передавать через props или контекст.
  • Логика остаётся независимой, легко масштабируемой.
  • Позволяет строить сложные UI-системы с минимальной связностью компонентов.

Паттерны организации Composition API

  1. Hook Factory – создание фабрик хуков, которые принимают параметры и возвращают готовую логику для компонента.
  2. Composable Modules – разбиение функциональности на модули, которые можно подключать по необходимости.
  3. State Derivation – вычисление зависимых состояний от базового состояния без дублирования кода.
  4. Effect Coordination – объединение нескольких побочных эффектов в один централизованный блок управления.

Эти паттерны повышают масштабируемость и поддерживаемость кода, делая компоненты в Inferno максимально гибкими и лёгкими для тестирования.

Особенности производительности

Inferno обеспечивает минимальные ререндеры, что делает Composition API особенно эффективным. Каждый хук и вычисляемое свойство оптимизировано для локальных изменений, что снижает нагрузку на виртуальный DOM. При правильном применении Composition API можно создавать сложные интерфейсы с высокой отзывчивостью и низкой затратой ресурсов.

Оглавление