Жизненный цикл веб-компонента

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

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

Инициализация начинается с вызова функции component(), которая принимает два обязательных аргумента: функцию компонента и объект опций. Пример базовой декларации:

import { c, useState, useEffect } from "atomico";

function MyComponent() {
    const [count, setCount] = useState(0);
    return <button oncl ick={() => setCount(count + 1)}>{count}</button>;
}

export const myComponent = c(MyComponent);

На этапе инициализации Atomico:

Создаёт экземпляр компонента как DOM-элемент.
Инициализирует все реактивные состояния через useState.
Связывает атрибуты и свойства компонента с реактивными переменными.
Настраивает наблюдателей атрибутов и подписки на изменения.

Монтирование компонента

Монтирование — это момент, когда компонент становится частью DOM. На этом этапе происходит:

Выполнение функций useEffect, которые зависят от пустого массива зависимостей ([]), аналогично componentDidMount в React.
Создание всех событий и слушателей, связанных с компонентом.
Рендеринг JSX в реальные DOM-узлы с применением виртуальной DOM-подобной системы Atomico.

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

import { c, useEffect } from "atomico";

function Timer() {
    useEffect(() => {
        const interval = setInterval(() => console.log("tick"), 1000);
        return () => clearInterval(interval); // очистка при размонтировании
    }, []);
    
    return <span>Таймер запущен</span>;
}

export const timer = c(Timer);

Здесь useEffect с пустым массивом зависимостей выполняется один раз при монтировании, а функция очистки — при размонтировании.

Обновление компонента

Обновление компонента происходит при изменении состояния или свойств (props). Atomico обеспечивает реактивное обновление через:

useState и useReducer для локального состояния.
useProps для отслеживания изменений атрибутов компонента.

Пример реакции на изменение свойства:

import { c, useProps } from "atomico";

function Greeting() {
    const props = useProps();
    return <p>Привет, {props.name}!</p>;
}

export const greeting = c(Greeting);

При изменении атрибута name в DOM:

<greeting name="Алексей"></greeting>

Компонент автоматически перерисует текст, демонстрируя реактивное обновление.

Особенности обновления:

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

Размонтирование компонента

Размонтирование происходит, когда компонент удаляется из DOM. На этом этапе:

Выполняются все функции очистки (cleanup) из useEffect.
Удаляются слушатели событий и таймеры.
Освобождаются ресурсы, связанные с внутренними состояниями и подписками.

Пример размонтирования:

useEffect(() => {
    const handleResize = () => console.log(window.innerWidth);
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
}, []);

Функция очистки гарантирует, что после удаления компонента из DOM не останется висящих обработчиков.

Сравнение с классическим жизненным циклом

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

Жизненный цикл Atomico	Классические веб-компоненты
Инициализация через `useState` и `useProps`	`constructor()`
Монтирование через `useEffect([])`	`connectedCallback()`
Обновление через реактивные хуки	`attributeChangedCallback()` и ручная проверка
Размонтирование через `return` в `useEffect`	`disconnectedCallback()`

Такой подход позволяет более удобно управлять состоянием и побочными эффектами без необходимости вручную синхронизировать свойства и DOM.