Компонент высшего порядка (HOC) — это продвинутая техника в React для повторного использования логики компонента. HOC на самом деле не являются частью React API. Они — образец, который вытекает из композиционной природы React.
Конкретно, компонент более высокого порядка — это функция, которая принимает компонент и возвращает новый компонент.
const EnhancedComponent = upperOrderComponent (WrappedComponent);
В то время как компонент преобразует реквизиты в пользовательский интерфейс, компонент более высокого порядка преобразует компонент в другой компонент.
HOC распространены в сторонних библиотеках React, таких как Redux’s connect и Relay’s createFragmentContainer.
В этом уроке мы обсудим, почему компоненты высшего порядка полезны, и как написать свой собственный.
HOCs для сквозных проблем
Компоненты являются основной единицей повторного использования кода в React. Тем не менее, вы обнаружите, что некоторые шаблоны не подходят для традиционных компонентов.
SImple explanation of Ad-hoc network — Google Applied CS with Android
Например, допустим, у вас есть компонент CommentList, который подписывается на внешний источник данных для отображения списка комментариев:
class CommentList extends React.Component < constructor(props) < super(props); this.handleChange = this.handleChange.bind(this); this.state = < // «DataSource» is some global data source comments: DataSource.getComments() >; > componentDidMount() < // Subscribe to changes DataSource.addChangeListener(this.handleChange); >componentWillUnmount() < // Clean up listener DataSource.removeChangeListener(this.handleChange); >handleChange() < // Update component state whenever the data source changes this.setState(< comments: DataSource.getComments() >); > render() < return ( ( key= /> ))> ); > >
Позже вы пишете компонент для подписки на один пост в блоге, который следует похожему шаблону:
class BlogPost extends React.Component < constructor(props) < super(props); this.handleChange = this.handleChange.bind(this); this.state = < blogPost: DataSource.getBlogPost(props.id) >; > componentDidMount() < DataSource.addChangeListener(this.handleChange); >componentWillUnmount() < DataSource.removeChangeListener(this.handleChange); >handleChange() < this.setState(< blogPost: DataSource.getBlogPost(this.props.id) >); > render() < return />; > >
CommentList и BlogPost не идентичны — они вызывают разные методы в DataSource и отображают разные выходные данные. Но большая часть их реализации одинакова:
- При монтировании добавьте прослушиватель изменений в DataSource.
- Внутри слушателя вызывайте setState при каждом изменении источника данных.
- При размонтировании удалите прослушиватель изменений.
Вы можете представить, что в большом приложении один и тот же шаблон подписки на DataSource и вызова setState будет происходить многократно. Нам нужна абстракция, которая позволяет нам определять эту логику в одном месте и делить ее между многими компонентами. Именно здесь компоненты высшего порядка выделяются.
What I Learned From Working At Google As A Software Engineer (That You NEED To Know)
Понимание компонентов высшего порядка React на примере
В этом руководстве мы рассмотрим концепции, необходимые для создания ваших собственных компонентов более высокого порядка (HOC). Мы реализуем HOC для сохранения состояния React в localStorage с именем withStorage , что позволит вам внедрять функциональность в компоненты без необходимости дублировать логику во всем приложении.
Если вам интересно увидеть тот же пример в рендере реквизитов, ознакомьтесь с этой статьей
Введение в HOC
Компонент более высокого порядка в React — это шаблон, используемый для разделения общих функций между компонентами без повторения кода. Компонент более высокого порядка на самом деле не является компонентом, это функция. Функция HOC принимает компонент в качестве аргумента и возвращает компонент. Он преобразует компонент в другой компонент и добавляет дополнительные данные или функции. Суммируя:
const NewComponent = (BaseComponent) => < // . create new component from old one and update return UpdatedComponent >
Две реализации HOC, с которыми вы, возможно, знакомы в экосистеме React, — это connect от Redux и withRouter от React Router. Функция connect из Redux используется для предоставления компонентам доступа к глобальному состоянию в хранилище Redux и передает эти значения компоненту в качестве свойств. Функция withRouter вводит информацию и функции маршрутизатора в компонент, позволяя разработчику получить доступ или изменить маршрут.
Создавать и поддерживать резюме — это не весело. Вместо этого позвольте нам создать для вас отличное резюме 🙂 Конструктор резюме›
Паттерн компонентов высшего порядка
Компонент более высокого порядка — это функция, которая принимает компонент в качестве аргумента и возвращает компонент. Это означает, что HOC всегда будет иметь форму, подобную следующей:
higherOrderComponent — это функция, которая принимает в качестве аргумента компонент с именем WrappedComponent . Мы создаем новый компонент с именем HOC , который возвращает из своей render функции. Хотя на самом деле это не добавляет никакой функциональности в тривиальный пример, он отображает общий шаблон, которому будет следовать каждая функция HOC. Мы можем вызвать HOC следующим образом:
const SimpleHOC = higherOrderComponent(MyComponent);
Базовый HOC на примере
Теперь мы расширим наш базовый шаблон компонента более высокого порядка, чтобы внедрить данные в наш обёрнутый.
Наша команда фактически вычислила secretToLife , которое оказалось числом 42 . Некоторые из наших компонентов должны делиться этой информацией, и мы можем создать HOC под названием withSecretToLife , чтобы передать его в качестве опоры нашим компонентам.
Обратите внимание, что этот HOC почти идентичен нашему базовому шаблону. Все, что мы сделали, это добавили опору secretToLife= , которая позволяет обернутому компоненту получить доступ к значению, вызвав this.props.secretToLife .
Другое дополнение заключается в том, что мы распространяем пропсы, переданные компоненту. Это гарантирует, что любые другие свойства, которые передаются обернутому компоненту, будут доступны через this.props таким же образом, как они были бы вызваны, если бы компонент не был передан через нашу функцию компонента более высокого порядка.
Наш WrappedComponent , который является просто улучшенной версией , позволит нам получить доступ к secretToLife как к опоре.
Практический HOC на примере
Теперь, когда у нас есть твердое представление о фундаментальном шаблоне HOC, мы можем создать тот, который будет практичным для реального приложения. Компонент более высокого уровня имеет доступ ко всем API React по умолчанию, включая state и методы жизненного цикла.
Функциональность нашего withStorage HOC будет заключаться в сохранении / загрузке состояния компонента, что позволит нам быстро получить доступ и отобразить его при загрузке страницы.
В верхней части withStorage у нас есть единственный элемент в состоянии компонента, который отслеживает, доступен ли localStorage в данном браузере. Мы используем ловушку жизненного цикла componentDidMount , которая проверяет, существует ли localStorage в функции checkLocalStorageExists . Здесь он проверит сохранение элемента и установит состояние true, если оно будет успешным.
Прокачиваем разработку на Vue с помощью паттернов: HOC
2019-05-17 в 6:33, admin , рубрики: hoc, vue, vue.js, vuejs, паттерны проектирования
Паттерн HOC (Higher Order Component) очень популярен у React-разработчиков. А вот Vue-разработчики его как-то обходят стороной. Очень зря. Попробуем разобраться в этом.
Что такое HOC?
Компонент высшего порядка (HOC) — это функция, которая принимает существующий компонент и возвращает другой компонент, который оборачивает первоначальный, добавляя новую логику.
HOC vs mixins
Возможно, многие зададутся вопросом, зачем использовать HOC, когда есть примеси? Они так же добавляют новый функционал компонентам. Что может HOC чего не умеют примеси?
Сперва вспомним, что такое примеси во Vue (определение взято из документации Vue):
Примеси (mixins) — это гибкий инструмент повторного использования кода в компонентах Vue. Объект примеси может содержать любые опции компонентов. При использовании компонентом примеси, все опции примеси «подмешиваются» к собственным опциям компонента.
Вроде бы назначение примесей и HOC одинаковое — они позволяют расширять функционал разных компонентов. Причём снаружи (использование итогового компонента) это может выглядеть даже одинаково.
Но различие кроется в самом принципе работы HOC и примесей. Примеси “подмешиваются” при объявлении компонента — любой экземпляр компонента будет содержать их.
С помощью HOC мы оборачиваем экземпляр компонента не меняя сам компонент, а создавая новый, в том месте, где это требуется. Это значит, что мы влияем только на тот кусок кода, где мы его используем. Благодаря этому мы уменьшаем связанность кода, делаем его более читабельным и гибким.
HOC чем-то напоминает шаблон проектирования decorator.
Создание HOC
Ну что ж. Давайте разберём всё это на примере.
Итак, у нас есть компонент кнопка:
Через какое-то время нам вдруг понадобилось логировать нажатие некоторых кнопок (но не всех). Мы можем это сделать через примеси, подмешав код для логирования в компонент кнопки, а потом в нужном месте включать или отключать логирование через какое-нибудь свойство компонента. Но согласитесь, это не очень удобно? А если такого функционала очень много? Одна ошибка — и все кнопки могут перестать работать корректно.
HOC в данном случае будет отличным решением. Мы просто обернём в некоторых местах кнопку соответствующим HOC.
Пришло время познать HOC на практике.