React Компоненты высшего порядка

Компоненты высшего порядка (High-Order Component (HOC)) — это нечто похожее на оболочку, которая добавляет дополнительные возможности вашим компонентам React. Можно представить это как чехол для телефона: чехол добавляет новые функции (например, защиту от воды), не меняя телефон как таковой.

Пример: Добавление рамки

Чтобы показать, как работают HOC, давайте создадим простой пример — добавим рамку вокруг любого компонента:

// Это наш HOC — он добавляет рамку вокруг любого компонента
function withBorder(WrappedComponent) {
  return function NewComponent(props) {
    return (
      <div style={{ border: '2px solid blue', padding: '10px' }}>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

// Простой компонент без рамки
function Greeting({ name }) {
  return <h1>Привет, {name}!</h1>;
}

// Создаем новый компонент с рамкой
const GreetingWithBorder = withBorder(Greeting);

function App() {
  return (
    <div>
      <Greeting name="Джон" />
      <GreetingWithBorder name="Джейн" />
    </div>
  );
}

В этом примере:

• withBorder — это наш компонент высшего порядка (HOC), представляющий собой функцию, принимающую компонент.
• Возвращает новый компонент, который оборачивает оригинальный компонент в div с рамкой.
• Исходный компонент (Greeting) остаётся неизменённым.
• Мы можем продолжать использовать как оригинальную, так и усиленную версию компонента.