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

Пример :

если бы мы хотели легко изменить стили текста, увеличив шрифт и сделав его жирнее, мы могли бы создать два компонента более высокого порядка:

  • withLargeFontSize, который добавляет поле font-size: "90px" к атрибуту style.
  • withBoldFontWeight, который добавляет поле font-weight: "bold" к атрибуту style.
const EnhancedComponent = WithStyles(WrappedAnyComponent)

Выполнение

Мы можем применить логику к другому компоненту:

  1. Получение другого компонента в качестве своего props
  2. Применение дополнительной логики к переданному компоненту
  3. Возврат того же или нового компонента с дополнительной логикой

Чтобы реализовать приведенный выше пример, мы можем создать withStyles HOC, который добавляет свойства color и font-size к стилю компонента.

Использование HOC

Компромиссы

DRY: использование шаблона компонентов более высокого порядка позволяет нам хранить всю логику, которую мы хотим повторно использовать, в одном месте. Это снижает риск случайного распространения ошибок по всему приложению за счет многократного дублирования кода, что может привести к появлению новых ошибок каждый раз.

Конфликт имен. Легко может случиться так, что HOC переопределит свойство компонента. Убедитесь, что HOC может обрабатывать случайное столкновение имен, либо переименовав реквизит, либо объединив реквизиты.

Читаемость: при использовании нескольких составных HOC, которые передают реквизиты элементу, заключенному в них, может быть сложно определить, какой HOC отвечает за какой реквизит. Это может затруднить отладку и масштабирование приложения.

Если у нас есть много компонентов, которые извлекают данные, мы можем захотеть показать определенный загрузчик, пока они все еще загружают данные.

В этом случае мы можем захотеть создать withLoader HOC, который возвращает компонент, который извлекает данные, и возвращает компонент LoadingSpinner, пока он извлекает данные.



Вызов упражнений HOC (форк) — StackBlitz
Стартовый проект React + TypeScript stackblitz.com



Для дальнейшего чтения изучите ссылку на паттерн HOC.