Утилитарные типы

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

atom — реактивные состояния

atom используется для создания реактивного состояния внутри компонента. Основная идея заключается в том, что любое значение, обернутое в atom, становится реактивным: изменение этого значения автоматически инициирует перерисовку компонента.

import { atom } from 'atomico';

const count = atom(0);

function Counter() {
    return <host>
        <button onCl ick={() => count.value--}>-</button>
        <span>{count.value}</span>
        <button onCl ick={() => count.value++}>+</button>
    </host>
}

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

  • atom возвращает объект с ключом value.
  • Любое изменение value вызывает повторный рендер.
  • Можно использовать атомы для любых типов данных: числа, строки, объекты, массивы.

computed — производные состояния

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

import { atom, computed } from 'atomico';

const count = atom(0);
const double = computed(() => count.value * 2);

function Counter() {
    return <host>
        <button onCl ick={() => count.value++}>+</button>
        <span>{double.value}</span>
    </host>
}

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

  • computed зависит от атомов или других вычисляемых значений.
  • Обновление происходит автоматически при изменении любых зависимостей.
  • Поддерживает ленивое вычисление, то есть вычисление выполняется только при обращении к value.

useEffect и реактивные побочные эффекты

Atomico наследует концепцию реактивных побочных эффектов, аналогичную React. С помощью useEffect можно реагировать на изменения атомов и выполнять побочные действия, например, сетевые запросы или локальное хранение состояния.

import { atom, useEffect } from 'atomico';

const name = atom("");

useEffect(() => {
    console.log("Имя изменилось:", name.value);
}, [name]);

Важно:

  • Зависимости — это массив атомов или computed-значений.
  • Эффект выполняется только при изменении значений зависимостей.
  • Поддерживается функция очистки для отмены подписок или таймеров.

useContext и передача состояний

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

import { createContext, useContext, atom } from 'atomico';

const ThemeContext = createContext(atom("light"));

function Toolbar() {
    const theme = useContext(ThemeContext);
    return <host class={theme.value}>Панель инструментов</host>;
}

function App() {
    const theme = atom("dark");
    return <ThemeContext.Provider value={theme}>
        <Toolbar />
    </ThemeContext.Provider>
}

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

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

ref — ссылка на DOM-узлы

ref позволяет получать прямой доступ к элементам DOM в компоненте. Это полезно для фокусировки, измерений или интеграции с внешними библиотеками.

import { useRef } from 'atomico';

function InputFocus() {
    const inputRef = useRef();
    return <host>
        <input ref={inputRef} />
        <button onCl ick={() => inputRef.current.focus()}>Фокус</button>
    </host>
}

Примечания:

  • useRef возвращает объект с ключом current.
  • current всегда содержит актуальный DOM-узел после рендера.
  • Можно использовать несколько рефов в одном компоненте.

watch — наблюдение за изменениями

watch позволяет следить за изменениями атомов и выполнять действия без рендера. Отличается от useEffect тем, что не инициирует повторный рендер, а работает как чистый наблюдатель.

import { atom, watch } from 'atomico';

const counter = atom(0);

watch(counter, (value) => {
    console.log("Счётчик изменился на", value);
});

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

  • Можно следить за отдельными атомами или массивом атомов.
  • Позволяет централизованно обрабатывать изменения состояния.
  • Полезно для логирования, синхронизации с внешними сервисами, анимаций.

Композиция утилитарных типов

Atomico позволяет комбинировать атомы, computed, watch и эффекты для построения сложных реактивных систем. Такой подход облегчает управление состоянием и делает компоненты более декларативными.

import { atom, computed, watch } from 'atomico';

const base = atom(2);
const exponent = atom(3);
const power = computed(() => Math.pow(base.value, exponent.value));

watch(power, (value) => {
    console.log(`Результат возведения ${base.value} в ${exponent.value} равен ${value}`);
});

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

Итоговое понимание

Утилитарные типы Atomico — это фундамент для построения реактивных компонентов:

  • atom — основной строительный блок состояния.
  • computed — производные значения для динамических вычислений.
  • useEffect — побочные эффекты с подпиской на изменения.
  • useContext — передача состояния между компонентами.
  • useRef — доступ к DOM-узлам.
  • watch — наблюдение за изменениями без перерисовки.

Совокупность этих типов формирует сильную реактивную модель, позволяя строить масштабируемые и легко управляемые компоненты.

Оглавление