Вы когда-нибудь были в ситуации, когда вам приходилось переписывать логику определенного компонента более одного раза, большинство из вас, читатели, могли бы сказать, почему бы не отделить логику от компонентов, а затем ссылаться на логику из компонентов, которым нужна логика, что, если логика привязана к компонентам пользовательского интерфейса? Тогда обращение к внешней логике становится проблемой. С увеличением скорости, с которой мы используем CDD (разработка, управляемая компонентами), насколько легко вы будете обрабатывать повторяющуюся логику в этих компонентах?
Как бы вы справились с этим, если пользователь вошел в систему, и вы хотите проверить статус входа пользователя в несколько компонентов или передать данные пользователя нескольким компонентам? вы также можете ответить и сказать использовать реквизиты, но это будет означать наличие одинаковых реквизитов для всех компонентов, и вам придется передавать данные всем компонентам.
Что, если вы пытаетесь создать приложение и не можете использовать избыточность, не спрашивайте «Почему я не могу использовать избыточность», процесс собеседования требует от вас создания приложения, и они укажут, что вы не используете Редукс,
Что вы делаете во всех этих случаях?
Не волнуйтесь, компания React увидела эту проблему раньше вас, и, следовательно, создание компонента более высокого порядка (HOC)
Согласно реагирующей документации….
Компонент высшего порядка (HOC) — это продвинутый метод React для повторного использования логики компонента. HOC не являются частью React API. Это паттерн, вытекающий из композиционной природы React. Конкретно, компонент более высокого порядка — это функция, которая принимает компонент и возвращает новый компонент.
Эта концепция компонентов высокого порядка взята из известной концепции функций высокого порядка.
Основное определение функции высокого порядка - это функция, называемая функцией высокого порядка, если она либо принимает функцию в качестве аргумента, либо возвращает другую функцию. Но теперь давайте поговорим о преимуществах написания функции высокого порядка. В javascript мы пытаемся писать меньше кода и пытаемся повторно использовать один и тот же код или функциональность как можно больше раз. Способ написания кода функций высокого порядка позволяет нам реализовать каррирование в Javascript. Что это за карри? Каррирование — это способ написания кода, при котором вы пишете общую функциональность и изменяете функциональность с помощью аргумента. Позволь мне привести пример:
Эта функция является функцией высокого порядка, поскольку она возвращает новую функцию. Эта функция будет действовать как генератор функций для различных функций. Например, я могу создать двойную функцию, используя вышеприведенную функцию высокого порядка:
Точно так же я могу использовать ту же функцию высокого порядка для создания тройной функции, которая принимает число в качестве аргумента и возвращает число, умноженное на три.
Этот тип генерации функций известен как каррирование в javascript. Это лучший способ написания кода, поскольку он отделяет базовую функциональность от конечной логики. Базовая логика может быть повторно использована в нескольких местах.
Хватит HOF, наша главная цель — поговорить о HOC.
Со знаниями, которые мы получили из концепции функций высшего порядка, мы можем легко догадаться, каким будет компонент высокого порядка и как было бы хорошей практикой использовать компоненты высокого порядка везде, где это возможно. Поскольку компоненты также являются функциями, которые называются компонентами в мире React, поэтому компоненты высокого порядка — это компоненты, которые принимают любой компонент в качестве аргумента или возвращают другой компонент. Компоненты более высокого порядка — это функции JavaScript, используемые для добавления дополнительных функций к существующему компоненту.
Теперь, когда у нас есть базовые знания о том, что такое компоненты более высокого порядка, пришло время запачкать руки и написать несколько кодов..;
Давайте рассмотрим создание нативного приложения для реагирования, которое будет иметь два экрана: один для отображения списка пользователей и функций поиска, а второй экран для отображения списка задач с функциями поиска.
Код для этих двух экранов можно найти ниже и соответствующий вывод.
Оба компонента являются функциональными компонентами, в обоих из них у меня есть методы для вызова API, и для отображения соответствующих результатов вызовов я также добавил входной текст для функции поиска и метод для выполнения процесса фильтрации. Они следующие.
Первый — это список пользователей:
Второй — список задач:
Это было легко!!!
Проблема в приведенной выше практике заключается в том, что мы повторяем множество кодов, у нас повторяется функция поиска в обоих модулях, и здесь HOC пригодится.
Мы решим эту проблему, создав модуль SearchHOC и добавив в модуль всю эту повторяющуюся логику.
Вы можете видеть, что мы переместили всю логику фильтра и пользовательский интерфейс в модуль, потому что они повторяются. Следующее, что нужно сделать, это пойти и изменить список пользователей и модули инструментов.
Вы можете видеть, что мы переместили всю логику фильтра и пользовательский интерфейс в модуль, потому что они повторяются. Следующее, что нужно сделать, это пойти и изменить модули списка пользователей и списка дел.
Они будут выглядеть следующим образом:
Все:
Как видите, мы использовали класс HOC в наших модулях, и они хорошо организованы и чисты, и мы по-прежнему поддерживали функциональные возможности модулей.
Если вы нашли этот пост полезным, пожалуйста, нажмите 💚 и 🐦
Также смотрите официальный документ Facebook здесь.
Теперь идите исследовать больше HOC !! 🙌
