Как максимально эффективно использовать компоненты высшего порядка в React

Позвольте HOC уменьшить количество повторений в вашем коде

Надеюсь, вы читали руководство Боба Мартина Чистый код. Если нет, то ее должен прочитать любой программист, от любителя выходного дня до опытного профессионала. Написание чистого кода — настоящая необходимость. Это убережет вас от повторного выполнения работы или создания больших проблем для себя в будущем. Независимо от того, работаете ли вы над хобби-проектом самостоятельно или являетесь частью команды разработчиков программного обеспечения, важно, чтобы ваши обязанности распределялись между вашими компонентами, вы не повторялись, а ваш код был удобочитаемым.

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

∘ Позвольте HOC уменьшить количество повторений в вашем коде
∘ Что такое HOC?
∘ Вход в систему при монтировании
∘ Создание HOC
∘ Применение HOC
∘ Заключительные мысли о HOC
∘ Ресурсы

Что такое ХОК?

HOC или компонент более высокого порядка — это способ повторного использования логики компонентов в React. Это считается продвинутой техникой, и хотя технически она не является частью API React, это полезный побочный эффект композиционной природы React.

Одним из наиболее распространенных HOC является подключение Redux. connect() подключает компонент React к хранилищу Redux. HOC не изменяет переданный ему класс компонента; вместо этого он возвращает новый, связанный класс компонента, который обертывает компонент, который вы передали. Но как вы можете максимально использовать компоненты более высокого порядка в React?

Вход в систему

Вы можете определить componentDidMount() для компонента React, поэтому я сделал вызов регистрации из этого метода для всех компонентов в моем проекте, которые я хотел зарегистрировать при монтировании. В качестве примера я просто буду использовать console.log() для ведения журнала.

componentDidMount() вызывается при монтировании компонента, поэтому он достигает цели регистрации при монтировании, но это много повторяющегося кода. Единственная часть из трех строк, которая изменяется в методе componentDidMount(), — это имя компонента, в данном случае AppWithMountLogging .

Как только вы заметите, что в вашем компоненте есть части, которые повторяют друг друга, или методы внутри компонентов, которые повторяют друг друга, пришло время извлечь эту логику в отдельный метод, который можно импортировать и использовать там, где это необходимо, или поместить его в логику более высокого уровня. -Компонент порядка (HOC). Повторное использование логики — один из лучших способов максимально эффективно использовать компоненты высшего порядка в React.

Вы можете обернуть один компонент в другой. Это действительно элегантный способ рефакторинга логики. Переместив весь этот метод в другой компонент, который я буду использовать в качестве HOC, я могу удалить эти три строки кода из всех компонентов, которые я регистрировал таким образом. Часто эти методы более сложны и длинны, так что вы можете получить большие выгоды с точки зрения количества строк кода, которые вы избавите себя от написания, проверки и поддержки.

HOC оборачивают компоненты внутри себя, как слой сверху. Согласно React, компонент более высокого порядка преобразует компонент в другой компонент. Он не заменяет и не перезаписывает внутренний компонент. Вы также можете комбинировать несколько HOC для одновременного использования, например withRouter(withBaseLogging(withXYZ(…(MyComponent)…))).

Создание HOC

Чтобы создать HOC для переноса компонентов, требующих регистрации при загрузке, давайте создадим такой функциональный компонент:

Убедитесь, что вы обратили внимание на метод рендеринга здесь. Мы визуализируем исходный компонент, который передается. Это важно, потому что мы не хотим возиться с тем, как компонент визуализируется.

Применение HOC

Вы создали HOC, содержащий логику, которую вы хотите применить к множеству компонентов. Замечательно! Теперь давайте перейдем к применению этого HOC, чтобы максимально использовать компоненты высшего порядка в React. Нам нужно обернуть компоненты, которые должны быть зарегистрированы на mount.

Это так просто. Мы можем импортировать withLoadLogging() в любой компонент, который необходимо зарегистрировать при монтировании. Это очень элегантный способ позаботиться об общей логике, которая не имеет отношения к логике рендеринга. Это единственный вызов метода в нижней части файла каждого компонента.

Заключительные мысли о HOC

HOC — отличный способ организовать простые и сложные функции за кулисами. Реализация спрятана, но HOC могут выполнять много мощной работы, например, withRouter() react-router-dom.

Не забывайте, что если вы будете следовать этому примеру, чтобы войти в компонент componentDidMount() компонента-оболочки, метод componentDidMount() внутреннего компонента будет по-прежнему вызываться при монтировании непосредственно после componentDidMount() HOC, поэтому любая логика в компоненте componentDidMount( ) все равно будет выполнен. Вы ничего не перезаписываете, просто добавляете некоторую логику, которая находится поверх обернутых компонентов.

Если у вас есть другие предложения о том, как максимально эффективно использовать компоненты высшего порядка в React, оставьте комментарий.

Удачного кодирования!

Открыта для внештатной писательской работы и фантомного письма: [email protected]. Я занимаюсь фронтенд-программированием и наукой о данных.