Skip to main content

Что такое HOC

Higher-Order Components (HOC) — это продвинутая техника в React для повторного использования логики компонентов. HOC — это функция, которая принимает компонент и возвращает новый компонент с дополнительными свойствами или поведением. Это похоже на паттерн декоратора в программировании.

Основные идеи HOC:​

  1. Принимает компонент и возвращает новый компонент:
    • HOC не изменяет оригинальный компонент, а создает новый, оборачивая его и добавляя новую функциональность.
  2. Используется для повторного использования логики:
    • HOC позволяет вынести общую логику (например, загрузку данных, управление состоянием, логику авторизации) в отдельную функцию, которую можно применять к разным компонентам.
  3. Не изменяет оригинальный компонент:
    • HOC создает новый компонент, оставляя оригинальный неизменным.

Преимущества HOC:​

  1. Повторное использование кода:
    • Логика загрузки данных, управление состоянием и другие общие задачи могут быть вынесены в HOC и использованы в разных компонентах.
  2. Разделение ответственности:
    • Компоненты остаются простыми и сосредоточены только на отображении данных, а HOC отвечает за логику.
  3. Гибкость:
    • HOC можно комбинировать, создавая сложные цепочки функциональности.

Недостатки HOC:​

  1. Сложность отладки:
    • HOC добавляют уровень вложенности в дерево компонентов, что может усложнить отладку.
  2. Проблемы с именованием пропсов:
    • Если несколько HOC передают одинаковые пропсы, могут возникнуть конфликты.
  3. Усложнение кода:
    • Чрезмерное использование HOC может сделать код менее читаемым и понятным.

Альтернативы HOC:​

С появлением хуков (например, useState, useEffect, useContext), многие задачи, которые раньше решались с помощью HOC, теперь можно реализовать с помощью пользовательских хуков. Это часто делает код более понятным и менее сложным.

Когда использовать HOC:​

  • Если вам нужно добавить одну и ту же логику к нескольким компонентам.
  • Если вы работаете с классовыми компонентами (хуки доступны только в функциональных компонентах).
  • Если вы предпочитаете паттерн декоратора.

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

Пример​

💥 Логгируем входящие props

import React from 'react';

// HOC: принимает компонент и возвращает новый
function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log('Props:', props);

    // можно добавить любую доп. логику
    return <WrappedComponent {...props} />;
  };
}

// Базовый компонент
function Hello({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Оборачиваем в HOC
const HelloWithLogger = withLogger(Hello);

// Использование
export default function App() {
  return <HelloWithLogger name="Tomas" />;
}

🔍 Что здесь происходит:

  1. withLogger — это HOC, который принимает компонент WrappedComponent.
  2. Он возвращает новый компонент WithLogger, который:
    • Логирует входящие props;
    • Рендерит исходный компонент, передавая ему те же props.
  3. В итоге HelloWithLogger ведёт себя как Hello, но с дополнительной функциональностью (логированием).

💥 HOC для аутентификации

function withAuth<P extends object>(
  WrappedComponent: React.ComponentType<P>
) {
  return function WithAuthHOC(props: P & { isAuthenticated: boolean }) {
    if (!props.isAuthenticated) {
      return <div>Доступ запрещён. Войдите в систему.</div>;
    }
    return <WrappedComponent {...props} />;
  };
}

🚀 Источник: DeepSeek