Higher-Order компоненты

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

Принцип работы HOC

HOC в Atomico опирается на базовую концепцию функций высшего порядка в JavaScript. Компонент передаётся в функцию, где его поведение оборачивается дополнительными возможностями, такими как управление состоянием, обработка событий или внедрение контекста.

Простейшая структура HOC выглядит следующим образом:

import { c, useState } from "atomico";

function withCounter(Component) {
    return c(props => {
        const [count, setCount] = useState(0);

        return (
            <Component
                {...props}
                count={count}
                increment={() => setCount(count + 1)}
            />
        );
    });
}

Здесь withCounter принимает любой компонент и возвращает новый компонент с дополнительными пропсами count и increment. Этот подход позволяет отделять логику состояния от визуальной части компонента.

Применение HOC

Использование HOC состоит в том, чтобы обернуть существующий компонент:

const Button = c(props => (
    <button onCl ick={props.increment}>
        Нажато {props.count} раз
    </button>
));

const EnhancedButton = withCounter(Button);

EnhancedButton теперь обладает встроенной логикой счётчика, не меняя исходный компонент Button.

Передача и комбинирование пропсов

HOC не ограничиваются простым добавлением состояния. Они могут модифицировать и расширять пропсы компонента, фильтровать их или внедрять дополнительные данные:

function withLogging(Component) {
    return c(props => {
        console.log("Props компонента:", props);
        return <Component {...props} />;
    });
}

const LoggingButton = withLogging(EnhancedButton);

Комбинирование HOC позволяет строить цепочку расширений:

const FinalButton = withLogging(withCounter(Button));

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

HOC и контекст

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

import { useContext } from "atomico";
import { ThemeContext } from "./theme-context";

function withTheme(Component) {
    return c(props => {
        const theme = useContext(ThemeContext);
        return <Component {...props} theme={theme} />;
    });
}

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

HOC и мемоизация

Для оптимизации рендеринга можно использовать memo в сочетании с HOC. Atomico позволяет мемоизировать результат функции высшего порядка, чтобы предотвратить лишние перерендеры:

import { memo } from "atomico";

const MemoizedButton = memo(withCounter(Button));

Мемоизация особенно полезна при работе с компонентами, которые получают сложные пропсы или часто обновляются, повышая производительность интерфейса.