🤔Что такое компоненты высшего порядка?

Это шаблон в React, который позволяет повторно использовать логику компонентов. HOC — это функция, которая принимает компонент и возвращает новый компонент с добавленной функциональностью.

🚩Зачем нужны HOC

🟠Повторное использование логики
HOC позволяет разделять и повторно использовать логику между разными компонентами, не дублируя код.
🟠Абстракция и композиция
HOC помогает создавать более абстрактные и композиционные компоненты, что улучшает архитектуру приложения.
🟠Разделение ответственности
HOC позволяет разделять обязанности между различными компонентами, улучшая структуру и читаемость кода.
🟠Как создается HOC
HOC создается как функция, которая принимает компонент и возвращает новый компонент с добавленной функциональностью.

🚩Пример

В этом примере withLogging — это функция, которая принимает компонент WrappedComponent и возвращает новый компонент, оборачивающий WrappedComponent с добавленной логикой логирования.

import React, { Component } from 'react';

// Функция, создающая HOC
function withLogging(WrappedComponent) {
  return class extends Component {
    componentDidMount() {
      console.log(`Компонент ${WrappedComponent.name} был смонтирован`);
    }

    componentWillUnmount() {
      console.log(`Компонент ${WrappedComponent.name} будет размонтирован`);
    }

    render() {
      // Передача пропсов в обёрнутый компонент
      return <WrappedComponent {...this.props} />;
    }
  };
}

// Пример использования HOC
class MyComponent extends Component {
  render() {
    return <div>Привет, мир!</div>;
  }
}

const MyComponentWithLogging = withLogging(MyComponent);

export default MyComponentWithLogging;

🚩Плюсы

➕Работа с данными
HOC может использоваться для оборачивания компонента логикой загрузки данных из API или управления состоянием данных.
➕Обработка прав доступа
HOC может использоваться для управления доступом к компонентам, проверяя права пользователя и условно рендеря компоненты.
➕Общие методы
HOC может добавлять общие методы или состояние, которое нужно разделить между несколькими компонентами.

🚩Пример

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

import React from 'react';

// Функция, создающая HOC для проверки прав доступа
function withAuthorization(WrappedComponent, userRole) {
  return class extends React.Component {
    render() {
      const { role } = this.props;
      if (role !== userRole) {
        return <div>Доступ запрещен</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
}

// Пример использования HOC
class AdminPanel extends React.Component {
  render() {
    return <div>Панель администратора</div>;
  }
}

const AdminPanelWithAuthorization = withAuthorization(AdminPanel, 'admin');

export default AdminPanelWithAuthorization;

Ставь 👍 и забирай 📚 Базу знаний