Компоненты высшего порядка React дают нам возможность наследовать функциональность компонента другому компоненту. Проще говоря, мы можем повторно использовать функциональность компонента.
Давайте разберемся с этим на одном небольшом примере:
Предположим, вы хотите разработать приложение, в котором вы хотите увеличивать число нажатием кнопки и наведением курсора на элемент. И если вы взяли два отдельных компонента для нажатия кнопки и для наведения, вам нужно реализовать логику увеличения числа в обоих компонентах. Проверьте приведенный ниже пример:
Счетчик кнопок без HOC:
Счетчик наведения без HOC:
Как вы можете видеть в приведенных выше файлах, мы реализовали логику увеличения счетчика в обоих файлах. Таким образом, с помощью HOC мы можем этого избежать. См. приведенный ниже пример.
Сначала мы создадим один компонент HOC:
Как вы можете видеть в приведенном выше компоненте HOC, он имеет один вложенный компонент, который содержит логику увеличения счетчика и связывает дочерний компонент (полученный из реквизита) с функцией count и handleCount и он возвращает этот компонент.
Примечание. Здесь мы взяли WrapperComponent как вложенный компонент. Но мы не можем взять туда анонимную функцию.
Теперь давайте посмотрим, как использовать этот компонент HOC в наших компонентах ButtonCounter и HoverCounter.
Счетчик кнопок с HOC:
Счетчик наведения с HOC:
Теперь, как вы можете видеть, логика увеличения счетчика удалена из обоих компонентов, и мы импортируем этот компонент HOC в оба компонента. И мы экспортируем компоненты, вызывая этот HOCComponent, имеющий component в качестве аргумента. Таким образом, мы повторно использовали одну общую функциональность из компонента HOC.
Вывод:
В приведенном выше примере мы видели, как работает React HOC. Здесь мы использовали функциональные компоненты для реализации HOC. Но вы также можете использовать компоненты класса. И просто чтобы понять HOC, я взял этот пример увеличения счетчика. Мы также можем реализовать эту функциональность другими способами.
Спасибо за чтение и продолжайте учиться…..
