Это необходимо?
React применяет парадигму декларативного программирования, что делает его таким мощным и замечательным. Применение этой парадигмы также делает React известным своей скоростью благодаря тому, как он взаимодействует с DOM (мы просто описываем JSX, а React отображает то, что мы хотим видеть).
Функции высшего порядка
HOF — важная концепция функционального программирования.
В JavaScript функции являются объектами первого класса, что означает, что они могут быть назначены переменным, могут быть переданы в качестве аргументов в другие функции и возвращены из них.
HOF – это функция, которая принимает функцию в качестве аргумента и/или возвращает функцию (обычно дополненную особым поведением).
Давайте рассмотрим простой пример:
Как мы видели в предыдущем коде, метод map() принимает функцию в качестве аргумента, следовательно, это функция более высокого порядка. Точно так же встроенные функции array filter(), find(), reduce() являются функциями более высокого порядка.
Компоненты высшего порядка
HOC — это чистые функции, которые принимают компонент и возвращают новый улучшенный компонент.
Другими словами: если мы применим концепцию HOF к компонентам React, мы получим HOC.
«Компонент высшего порядка (HOC) — это продвинутая техника в React для повторного использования логики компонентов. HOC сами по себе не являются частью React API. Это паттерн, вытекающий из композиционной природы React». ~ reactjs.org
Давайте погрузимся в реальный пример. Предположим, у нас есть пользователи, перечисленные в таблице и поле ввода, целью которых является поиск пользователей с указанным значением. Точно так же в нашем приложении есть списки вакансий и компаний с функцией поиска.
Таким образом, у нас есть несколько компонентов с одинаковыми функциями поиска.
Прежде всего, мы должны создать функцию, которая принимает компонент списка в качестве аргумента и дополняет его функциями поиска:
Компонент «UsersList» выглядит следующим образом:
Как только HOC будет готов, мы можем обернуть компонент «UsersList» в функцию «withFilter»:
Отлично, теперь мы можем сделать то же самое с компонентами «CompaniesList» и «JobsList».
Известным примером HOC является «подключение» Redux.
Крючки
”Хук — это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие функции React без написания класса». ~ reactjs.org
Что это значит?
С помощью React Hooks мы можем добавить локальное состояние и использовать функции жизненного цикла в функциональных компонентах. Они помогают нам избежать использования React с классами и следовать только функциональному стилю программирования.
React Hooks — это просто функции JavaScript. В предыдущем примере HOC withFilter мы уже использовали хук useState для хранения отфильтрованного списка в локальном состоянии.
За исключением встроенных в React хуков (useState, useEffect, …), мы можем создавать собственные хуки для совместного использования логики с отслеживанием состояния между компонентами.
Теперь давайте напишем предыдущий пример без использования HOC:
Как мы видим, локальное состояние и поле ввода с его функцией onChange переместились из HOC в компонент. Если мы сделаем то же самое для компонентов «JobsList» и «CompaniesList», мы начнем дублировать код в приложении.
Давайте посмотрим, как React Hooks может помочь нам избежать этого.
Отлично, хук useFilter готов. Теперь давайте изменим наш компонент следующим образом:
Хороший! Мы также можем использовать пользовательский хук в компонентах «JobsList» и «CompaniesList».
До сих пор мы видели, как React Hooks и HOC полезны для совместного использования логики с отслеживанием состояния между компонентами. Но есть и некоторые отличия, которые мы должны учитывать при принятии решения об использовании той или иной методики. Например:
- HOC — это независимый от React шаблон, но хуки являются частью React.
- Мы можем создавать HOC как функции, но React Hooks не компонуемы.
- HOC добавляет еще один компонент в иерархию компонентов (мы можем проверить это в DevTools).
Следовательно, прежде чем приступать к замене всех HOC на React Hooks, мы должны ответить на следующий вопрос — а нужно ли это вообще?
В первую очередь важно четко понимать плюсы и минусы каждого из них и найти лучшее и наиболее подходящее решение для проекта.
Написано Мариам Кочумян.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
