Понимание React Higher Order Component (HOC)

Почти все, что касается использования SPA-библиотеки, заставляет вас абстрагировать бизнес-логику и писать качественный код. Последние несколько лет React обеспечивает такой контроль качества с помощью различных удивительных паттернов проектирования, и нам это не чуждо!

В этой статье мы обсудим одно из таких дополнений к механизму контроля качества React с помощью компонентов высшего порядка. К концу этой статьи вы должны быть уверены в себе и готовы к тому, чтобы при необходимости решать/совершенствовать кодовую базу с помощью этого принципа.

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

Компоненты высшего порядка — это отличный паттерн, который оказался очень ценным для нескольких библиотек React. Согласно официальной документации React —

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

JavaScript — хорошо подходящий язык для функционального программирования, поскольку он может принимать функции высшего порядка. Функция высшего порядка — это функция, которая может принимать другую функцию в качестве аргумента и/или возвращать функцию в качестве результата.

Функции высшего порядка позволяют нам абстрагироваться от действий, а не только от значений. С помощью HOC мы можем обернуть наш дочерний компонент и добавить поверх него бизнес-логику или расширить возможности самого дочернего компонента.

Что я могу сделать с помощью HOC?

На высоком уровне HOC позволяет вам:

  • Повторно использовать код, повторно использовать логику и использовать абстракцию.
  • Render Highjacking
  • Абстрагирование и манипулирование состоянием
  • манипулирование реквизитами

Сторонние библиотеки React, такие как Redux или React Router, часто используют HOC. Я уверен, что вы использовали некоторые из них, даже не подозревая об этом.

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

Типы HOC

В React есть два основных способа реализации HOC: 

  • Props Proxy (PP)
  • Инверсия наследования (II)

Оба способа позволяют по-разному манипулировать WrappedComponent. Оба способа представляют собой просто функцию, которая принимает компонент в качестве аргумента и создает новый компонент, содержащий WrappedComponent.

Props Proxy

Props Proxy, как следует из названия, передает свойства, полученные от компонента более высокого порядка.

Решающим элементом здесь является то, что метод render HOC возвращает React Element типа WrappedComponent. HOC получает то, что мы передаем через props, отсюда и название props proxy. HOC возвращает React Element, который описывает то, что React должен отрисовать в процессе согласования.

Вы также можете обернуть обернутый компонент другими JSX-элементами, изменяя его UI в соответствии с потребностями вашего приложения.

HOC Props Proxy полезны в следующих ситуациях:

  • Манипулирование реквизитами
  • Доступ к экземпляру через Refs
  • Абстрагирование состояния
  • Обертывание/композиция WrappedComponent с другими элементами.

Инверсия наследования

Этот HOC может получить доступ к экземплярам WrappedComponents. Это дает нам доступ к состоянию, реквизитам, крючкам жизненного цикла компонента и методу рендеринга.

Возвращаемый класс HOC (Enhancer) расширяет WrappedComponent, как вы можете видеть. Это называется инверсией наследования, потому что вместо того, чтобы WrappedComponent расширял какой-то класс Enhancer, Enhancer пассивно расширяет его. Таким образом, их отношения выглядят обратными.

Инверсионное наследование HOC полезно в следующих ситуациях:

  • Render Highjacking
  • Манипулирование состоянием

Давайте рассмотрим несколько примеров

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

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

Рассмотрим пример ниже —

Здесь мы сделали Form в качестве дочернего компонента, который обернут вокруг withHandlers HOC. Это дает дочернему компоненту свободу, не усложняет базовый компонент лишней логикой и оправдывает разделение забот.
 
Теперь HOC контролирует добавление/удаление валидаций и любых дополнительных действий по усмотрению разработчика.

Заключение

Это был относительно простой пример, чтобы дать вам представление о том, как эти идеи работают на практике. Потребуется некоторое время, чтобы привыкнуть к такому типу абстракции и почувствовать себя комфортно, поэтому не теряйте драйв и фокус с HOCs.

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

Если я упустил какой-то момент или вы хотите что-то обсудить, не стесняйтесь, оставляйте комментарии ниже, я буду рад ответить как можно скорее. 🌟
Наконец, спасибо, что дочитали статью до конца и проявили интерес к React. Вы удивительны и продолжаете вносить положительные изменения каждый день. Мир вам. ✌🏼

Оцените статью
Procodings.ru
Добавить комментарий