Ответ
Кастомный HOC (Higher-Order Component) — это функция, которая принимает компонент и возвращает новый компонент с дополнительной логикой. Пример:
import React from 'react';
const withLogger = (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
console.log(`Component ${WrappedComponent.name} mounted`);
}
render() {
return <WrappedComponent {...this.props} />;
}
};
};
// Использование
const MyComponent = ({ text }) => <div>{text}</div>;
const MyComponentWithLogger = withLogger(MyComponent);
HOC добавляет логирование при монтировании компонента. Ключевые моменты:
- Принимает компонент (
WrappedComponent
) - Возвращает новый компонент (обычно классовый)
- Прокидывает пропсы через
{...this.props}
- Может добавлять любую дополнительную логику (жизненный цикл, контекст и т.д.)