🚀 Higher-Order Components (HOC) в React: Паттерн для повторного использования логики Привет, друзья! 👋 Сегодня поговорим о Higher-Order Components (HOC) — одном из популярных паттернов в React, который помогает повторно использовать логику между компонентами. 🔹 Что такое HOC? HOC (компонент высшего порядка) — это функция, которая принимает компонент и возвращает новый компонент с добавленной функциональностью. HOC ≠ обычный компонент. Это скорее обёртка, которая расширяет функционал ваших компонентов. Синтаксис:

const withExtraProps = (WrappedComponent) => {
  return (props) => {
    // Добавляем новые пропсы или логику
    const extraProps = { additional: 'value' };
    return <WrappedComponent {...props} {...extraProps} />;
  };
};

🔹 Когда использовать HOC? HOC применяется, когда нужно: 1. Повторное использование логики между несколькими компонентами. 2. Оборачивать компонент в дополнительную функциональность, например, авторизация, логирование или обработка данных. 3. Добавить новые пропсы или состояния. Пример: HOC для проверки авторизации. 🔹 Пример HOC Задача: Реализовать HOC для отображения содержимого только для авторизованных пользователей.

import React from 'react';

// HOC для проверки авторизации
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = props.isAuthenticated; // Получаем пропс

    if (!isAuthenticated) {
      return <div>Доступ запрещён. Пожалуйста, войдите в систему.</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

// Пример компонента
const UserProfile = (props) => {
  return <div>Привет, {props.name}! Это твой профиль.</div>;
};

// Оборачиваем компонент
const ProtectedUserProfile = withAuth(UserProfile);

// Использование
export default function App() {
  return (
    <div>
      <ProtectedUserProfile isAuthenticated={false} name="Алексей" />
    </div>
  );
}

Результат: Если пользователь не авторизован, вместо компонента UserProfile отобразится сообщение "Доступ запрещён". 🔹 Важные аспекты при работе с HOC 1. Передача пропсов HOC должен передавать все пропсы внутрь оборачиваемого компонента, чтобы он оставался гибким:

<WrappedComponent {...props} />

2. Декларативное имя Придумайте читаемое имя для вашего HOC, например, withAuth, withLogger. 3. Не переусложняйте HOC может сделать код сложнее для понимания. Если логику можно вынести в кастомные хуки — выбирайте их. 4. Не мутируйте оборачиваемый компонент HOC не должен изменять оригинальный компонент, а только оборачивать его. 🔹 Когда НЕ использовать HOC Сегодня многие задачи, которые решались через HOC, проще выполнять с помощью: - Custom Hooks для повторного использования логики. - Context API для глобального состояния. HOC остаётся актуальным, но его популярность снижается в пользу более простых решений. 🎯 Заключение Higher-Order Components — мощный инструмент, если вы хотите добавить функционал к компонентам, сохраняя их чистоту и переиспользуемость. Но помните, что HOC — не единственный способ повторного использования логики, и в некоторых случаях кастомные хуки могут быть лучшим выбором 😊 ReactJs Daily | #begginers