Компоненты высшего порядка в React | OTUS
⚡ Подписка на курсы OTUS!
Интенсивная прокачка навыков для IT-специалистов!
Подробнее

Курсы

Программирование
Backend-разработчик на PHP
-9%
Алгоритмы и структуры данных
-9%
Team Lead
-6%
Архитектура и шаблоны проектирования Разработчик IoT
-13%
C# Developer. Professional
-9%
HTML/CSS
-11%
C# ASP.NET Core разработчик
-5%
Kotlin Backend Developer
-8%
iOS Developer. Professional
-8%
Symfony Framework Java Developer. Basic C++ Developer. Professional Web-разработчик на Python MS SQL Server Developer Android Developer. Basic Разработчик программных роботов (RPA) на базе UiPath и PIX Microservice Architecture Unity Game Developer. Basic Разработчик голосовых ассистентов и чат-ботов React.js Developer Node.js Developer Интенсив «Оптимизация в Java» Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Супер-интенсив «СУБД в высоконагруженных системах» Супер-интенсив "Tarantool" C++ Developer. Basic
Инфраструктура
Administrator Linux.Basic
-10%
Мониторинг и логирование: Zabbix, Prometheus, ELK
-10%
Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes»
-30%
Administrator Linux. Professional
-6%
Дизайн сетей ЦОД
-13%
Разработчик IoT
-13%
Экспресс-курс по управлению миграциями (DBVC)
-10%
Базы данных Network engineer Разработчик программных роботов (RPA) на базе UiPath и PIX Microservice Architecture Reverse-Engineering. Professional Внедрение и работа в DevSecOps Administrator Linux. Advanced Infrastructure as a code in Ansible Супер-практикум по использованию и настройке GIT Супер-интенсив «СУБД в высоконагруженных системах» Супер-интенсив "Tarantool"
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

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

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

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

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

1-1801-2097be.png

В процессе вызова 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/.

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться