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

Приходилось ли вам использовать компоненты высшего порядка (КВП)? К примеру, та же функция Redux connection() возвращает компонент высшего порядка. Но что же из себя представляют эти компоненты?

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

Давайте вернемся к функции connect() и посмотрим на фрагмент кода:

В процессе вызова connect() мы получаем компонент высшего порядка, который можно применить для того, чтобы обернуть компонент. Далее мы передаем наш компонент в КВП, а потом начинаем использовать уже возвращаемый им компонент. Таким образом, КВП предоставляет разработчику возможность абстрагировать общую для компонентов логику в единый главный компонент.

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

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

В нашем примере компонент под названием AuthWrapper включает в себя всю логику аутентификации. И все, что он выполняет, — так это смотрит на свойство isLoggedIn, возвращая WrappedComponent либо тег

в зависимости от значения, присвоенного свойству.

Таким образом, компоненты высшего порядка довольно полезны, ведь они позволяют повторно использовать код.

По материалам https://www.freecodecamp.org/news/these-are-the-concepts-you-should-know-in-react-js-after-you-learn-the-basics-ee1d2f4b8030/.