Источник: Nuances of Programming
В этой статье мы рассмотрим компоненты высшего порядка (Higher-Order Components, HOC) в React.
Что такое HOC?
HOC — это особая техника в React, при которой функция принимает аргумент Component и возвращает новый компонент.
В данном примере функция composeComponent принимает аргумент Component и возвращает компонент ES6 class. Возвращенный класс отображает аргумент Component. Аргумент Component является компонентом React, который будет отображаться возвращенным компонентом class.
Например:
CatComponent отображает следующее:
Cat Component
CatComponet может быть передан функции composeComponent для получения другого компонента:
const composedCatComponent = composeComponent(CatComponent)
composedCatComponent может быть отображен:
<composedCatComponent />
Результат выглядит следующим образом:
Cat Component
Та же функция высшего порядка, как и в JS.
Функция высшего порядка
Функция высшего порядка — это шаблон в JS, при котором одна функция принимает другую функцию и возвращает функцию в качестве результата, что является возможным благодаря композиционному характеру JS. Это означает, что:
- объекты
- массивы
- строки
- числа
- логические значения
- функции
могут быть переданы функциям в качестве аргументов или возвращены из функции.
Функция mul возвращает функцию, которая захватывает x в замыкании. x теперь доступен для возвращенной функции, а mul является теперь функцией высшего порядка, поскольку она возвращает функцию. Это означает, что ее можно использовать для создания более специфических функций с использованием различных аргументов.
Например, ее можно использовать для создания функции, которая утраивает свои аргументы:
В чем преимущества элементов высшего порядка? При постоянном повторении логики нужно найти способ разместить логику в одном месте и использовать ее оттуда. Функции высшего порядка предоставляют шаблон, который можно использовать для этой реализации.
В приведенном выше примере при непрерывном умножении на 3 в приложении можно создать функцию, которая возвращает функцию, умножающую на 3 triple. Поэтому при необходимости написать код multiplication by 3, нужно просто вызвать triple, передающий число для умножения на 3 в качестве параметра.
Общие проблемы при работе с HOC
В чем преимущества использования HOC в приложении React?
В процессе написания программы одна и та же логика может повторяться снова и снова.
Например, приложение для просмотра и редактирования документов. Приложение будет аутентифицировано, поэтому только аутентифицированные пользователи смогут получить доступ к панели инструментов, редактировать, просматривать или удалять документы. Маршруты будут выглядеть следующим образом
Документы нужно аутентифицировать, чтобы только аутентифицированные пользователи могли получить к ним доступ. Для этого необходимо сделать следующее:
State.auth содержит состояние пользователя. Если пользователь не аутентифицирован, то значение будет false, в обратно случае — true. Функция connect отобразит состояние для объектов props isAuth. Затем при подключении компонента к DOM запускается componentWillMount. Здесь нужно проверить, обладает ли prop isAuth значением true. При значении true метод передается вниз, а при значении false метод передает маршрут “/” индексной страницы маршрутизатору. В результате браузер загружает страницу индекса внутри рендеринга компонента documents, запрещая не аутентифицированным пользователям получить доступ.
Когда компонент выполняет ре-рендеринг после первоначального рендеринга, необходимо выполнить те же действия в componentWillUpdate, чтобы проверить, авторизован ли пользователь. Если нет, загружается страница индекса.
Теперь сделаем то же самое в ViewDocument:
И в EditDocument:
Также в DelDocument:
Страницы выполняют различные действия, однако реализация одинакова.
Каждый компонент:
- подключается к состоянию с помощью соединения react-redux;
- отображает состояние auth для свойств props isAuth;
- проверяет аутентификацию в componentWillMount;
- проверяет аутентификацию в componentWillUpdate.
Представьте, что в проекте появится больше компонентов, в каждом из которых нужно выполнить те же действия. Это займет много времени.
Поэтому нужно найти способ для определения логики в одном месте. Лучше всего использовать HOC.
Для этого перемещаем всю логику в функцию, которая будет возвращать компонент:
Все реализации находятся внутри компонента Authentication. Функция requireAuthentication соединяет компонент Authentication с хранилищем и возвращает его. Затем Authentication отображает компонент, переданный через аргумент ComposedCompoennt.
Маршруты теперь выглядят следующим образом:
Таким образом, независимо от количества маршрутов в приложении, нужно просто вызвать функцию requireAuthentication с переданным ей компонентом.
Заключение
Функция высшего порядка:
- возвращает функцию;
- используется для решения проблемы DRY.
Компонент высшего порядка:
- принимает компонент в качестве аргумента;
- возвращает другой компонент;
- возвращенный компонент отображает оригинальный компонент;
- используется для решения проблемы DRY.
Спасибо за внимание !!!
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Chidume Nnamdi 🔥💻🎵🎮: Understanding Higher-Order Components in React
