Приведи пример написания кастомного HOC

Question

Приведи пример написания кастомного HOC

Тип вопроса: React Вероятность: 10% Категория: Frontend Разработчик

Ответ

Кастомный 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}
Может добавлять любую дополнительную логику (жизненный цикл, контекст и т.д.)

Ответ 18+ 🔞

А, ну вот, опять эти ваши HOC'и, блядь! Слушай, сейчас объясню, как ёжику в тумане, только понятнее будет, ёпта.

Представь себе, ты пишешь компонент. Простой, как три копейки. <MyComponent text="Привет" />. И всё у него хорошо, но вдруг начальство говорит: «А добавь-ка логирование, когда этот кусок кода на страницу встаёт!». И ты такой: «Ну окей, ща в каждый компонент буду componentDidMount пихать? Да это ж пиздец какой-то, копипаста на овердохуища!».

Вот тут-то и выходит на сцену наш герой — кастомный HOC, или, по-русски, компонент высшего порядка. Это не бог весть какая магия, а просто функция, сука! Функция, которая берёт твой голый, ни в чём не повинный компонент, заворачивает его в свою логику и отдаёт тебе обратно уже упакованным.

Как это выглядит в жизни, блядь? Смотри:

import React from 'react';

// Вот она, наша фабрика по обёртыванию компонентов. Называется withLogger.
const withLogger = (WrappedComponent) => { // Принимает она твой голый компонент.
  return class extends React.Component { // И возвращает НОВЫЙ, классовый компонент.
    componentDidMount() {
      // А сюда уже пихает любую свою, ебучую, логику.
      console.log(`Компонент ${WrappedComponent.name} примонтировался, ёпта!`);
    }

    render() {
      // А тут он твой исходный компонент рендерит, не забыв все пропсы ему передать.
      return <WrappedComponent {...this.props} />;
    }
  };
};

И как этим пользоваться? Да элементарно, ваще!

// Был у тебя голый компонент...
const MyComponent = ({ text }) => <div>{text}</div>;

// Стал у тебя компонент в шубе из логирования!
const MyComponentWithLogger = withLogger(MyComponent);

Теперь, когда <MyComponentWithLogger text="Всем чмоки в этом чате!" /> появится на странице, в консоли сразу: «Компонент MyComponent примонтировался, ёпта!». Красота, блядь!

Суть в чём, в рот меня чих-пых:

Принимает компонент (этот самый WrappedComponent).
Возвращает новый компонент (чаще всего классовый, чтобы к жизненному циклу прицепиться).
Пропсы прокидывает через {...this.props} — это святое, не забывай, а то твой обёрнутый компонент оголодает.
Может навешивать любую хуйню: подписки на контекст, инжектить пропсы, логировать, считать рендеры — да что угодно, фантазия ебать ограничена!

Вот и вся философия. Не боги горшки оборачивают, а функции — компоненты. Понял да?