Используйте аналогичную логику в своем компоненте React.

Введение

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

Как говорится в документации React,

Компонент более высокого порядка (HOC) - это прикладная техника в React для повторного использования логики компонента. Сам HOC не является частью React API. HOC - это шаблон проектирования, вытекающий из природы композиции React.

HOC - это шаблон проектирования, который действительно может поднять повторное использование кода на новый уровень. Если вы использовали Redux с React, возможно, вы встречали функцию connect . Компонент с оболочкой connect в основном предоставляет этому компоненту доступ к глобальному состоянию из хранилища Redux. Эта функция connect является примером HOC. Другой яркий пример HOC - это withRouter из response-router. Это дает компоненту доступ к информации о маршруте.

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

Итак, как нам написать собственный HOC?

Для облегчения понимания процесса написания HOC мы напишем HOC, который внедряет функцию sort, которая может использоваться компонентом в их массиве целых чисел.

Создайте файл с именем «SortingHOC».

Как мы видим, мы создаем функцию withSorting, которая принимает в качестве аргумента Component. Внутри этой функции мы создаем функцию sort, которая передается в качестве свойств Component. Компонент с функцией sort в качестве свойств позже возвращается всей функцией. Мы также распространяем свойства, чтобы все существующие свойства компонента оставались такими, как есть. Таким образом, мы внедряем этот sort как опору для компонента, переданного в этот HOC.

Теперь давайте импортируем этот HOC и используем его в компоненте.

Использовать HOC довольно просто. Мы просто импортируем его и вызываем, когда экспортируем компонент. Мы импортировали наш HOC как withSorting сюда. После вызова нашего HOC, как показано выше, у нас теперь есть доступ к функции sort из наших свойств. Для простоты я просто зарегистрировал результат функции сортировки.

Массив отсортирован! Итак, мы просто написали и использовали наш HOC. Замечательно, не правда ли?

Что нужно помнить при написании HOC

  • HOC - это всегда чистая функция. Это не должно вызывать побочных эффектов. HOC не изменяет компоненты ввода и не использует наследование для копирования поведения.
  • Не используйте HOC внутри метода рендеринга.
  • Ссылки не проходят через HOC.

В этой статье дается упрощенное описание компонента высшего порядка в React. Пожалуйста, проверьте официальную React Docs для получения дополнительной информации.