Ответ
HOC принимает компонент и возвращает новый компонент с дополнительной логикой. Это функция, которая оборачивает другой компонент, добавляя ему новые props или поведение.
Пример:
const withLogger = (WrappedComponent) => {
return (props) => {
console.log('Rendering:', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
};
const EnhancedComponent = withLogger(MyComponent);Ключевые особенности:
- Принимает компонент как аргумент
- Возвращает новый компонент
- Не модифицирует исходный компонент
- Может добавлять/изменять props
- Часто используется для cross-cutting concerns (логирование, авторизация)
Ответ 18+ 🔞
А, HOC, говоришь? Ну это ж классика, блядь! Ёпта, как же я их раньше накручивал, мать их...
Смотри, представляешь такую хуйню: есть у тебя компонент, обычный, ни о чём не подозревает. А ты берёшь и делаешь ему, типа, апгрейд, но не ломая его самого. Как будто надеваешь на него дополнительную броню или прикручиваешь прибор ночного видения, понимаешь?
Вот смотри на этот код, тут всё понятно:
const withLogger = (WrappedComponent) => {
return (props) => {
console.log('Rendering:', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
};
const EnhancedComponent = withLogger(MyComponent);Суть в чём, блядь? Ты пишешь функцию (withLogger), которая как чёрный ящик. В неё суёшь свой родной компонент (MyComponent), а она тебе выплёвывает НОВЫЙ компонент, уже прокачанный. Этот новый умеет всё то же самое, что и старый, но ещё и в консоль пишет, когда его рендерят. Красота, ёпта!
Главные фишки, которые надо запомнить, а то опять забудешь, как последний распиздяй:
- Принимает компонент как аргумент. Не данные, не строку, а именно целый компонент, сука. Засунул — и поехали.
- Возвращает новый компонент. Старый остаётся нетронутым, чистеньким. Это важно, блядь, не надо ломать то, что работает!
- Не мутирует исходник. Вообще. Никаких подлых изменений сбоку. Чистая функция, ебать её в сраку.
- Может накидывать пропсы. Вот это мощь! Можешь новому компоненту доп. данные передать, или старые преобразовать. Как шпион, который подслушал разговор и добавил от себя.
- Идеально для сквозной хуйни. Ну вот как логирование в примере. Или проверка прав доступа. Или загрузка данных. Вместо того чтобы эту логику в каждом компоненте копипастить, ты её в один HOC загоняешь и оборачиваешь кого надо. Овердохуище экономии времени и нервов!
Короче, HOC — это как взять обычную водку и сделать из неё коктейль, не разбавляя саму бутылку. Добавил сок, лёд, ещё какой-то пиздец — и получил новый, улучшенный напиток. А водка-то осталась водкой, её ещё можно отдельно использовать.