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

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

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

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

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

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

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

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

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

  • Повторное использование кода, повторное использование логики и абстракция начальной загрузки
  • Рендеринг угона
  • Абстракция состояния и манипулирование
  • Манипуляции с реквизитом

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

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

Типы HOC

Два основных способа реализации HOC в React:

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

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

Реквизит Прокси

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

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

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

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

  1. Управление реквизитом
  2. Доступ к экземпляру через Refs
  3. Абстрагирование состояния
  4. Обертывание/составление WrappedComponent с другими элементами

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

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

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

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

  1. Рендеринг угона
  2. Управление состоянием

Давайте углубимся в некоторые примеры

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

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

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

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

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

Заключение

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

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

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

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