Ответ
Компонент высшего порядка (Higher-Order Component, HOC) — это функция, которая принимает компонент и возвращает новый компонент с дополнительной логикой. HOC позволяют повторно использовать код, добавляя общую функциональность нескольким компонентам.
Пример:
function withLogger(WrappedComponent) {
return function(props) {
console.log('Component rendered:', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
}
const Button = ({ text }) => <button>{text}</button>;
const ButtonWithLogger = withLogger(Button);Ключевые особенности:
- HOC не изменяют оригинальный компонент, а создают новый
- Передают все props обёрнутому компоненту
- Часто используются для авторизации, логирования, управления состоянием
- Могут вызывать проблемы с refs и displayName (нужно использовать forwardRef и задавать displayName)
Ответ 18+ 🔞
Да ты посмотри, что эти фронтендеры выдумали, блядь! Компонент высшего порядка, ёпта! Звучит-то как, будто в академии наук заседание, а на деле — обычная функция, которая берёт один компонент и выёбывается из него, как мартышка, пока не получит новый, с довесками.
Вот смотри, как это работает, на простом примере, чтобы даже кот, сука, собака понял:
function withLogger(WrappedComponent) {
return function(props) {
console.log('Component rendered:', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
}
const Button = ({ text }) => <button>{text}</button>;
const ButtonWithLogger = withLogger(Button);Видишь? Функция withLogger — это и есть наш хитрожопый HOC. Она как шпион, блядь: подсовывает тебе компонент, а сама сверху ещё и логирование прикручивает. "О, смотри-ка, — говорит, — Button рендерится!" И всё, пиши пропало.
А главные фишки этих HOC'ов вот какие, запоминай, а то потом будешь как Герасим, только "му-му" говорить:
- Они не ломают оригинал. Не как тот мудак, который взял и переписал "Пиноккио" на "Буратино". Нет, они берут старый компонент, заворачивают в новую обёртку и вуаля — готово. Старый на месте, новый с прибамбасами.
- Все пропсы пропихивают внутрь. Честно, без обмана. Что получили, то и передали дальше. Ни одной штуки не оставили себе, не то что некоторые.
- Используют их для всякой скучной общей хуйни. Авторизация там, логирование, подписка на данные — всё, что лень по сто раз писать. Один раз написал HOC и оборачивай кого хочешь, хоть кнопку, хоть заголовок.
- Но есть и подводные ебли, конечно. С рефами, например, могут быть траблы, и имя компонента в девтулзах иногда теряется. Но и на это есть управа —
forwardRefиdisplayNameв помощь, ебать.
Вот и вся магия, блядь. Не боги горшки оборачивают, а обычные функции. Главное — не переоборачивай всё подряд, а то получится как с тем Герасимом: замочил всё, что любил, а потом совесть, сука, заела.