Композиция с помощью HOC (Higher Order Component) в React

11.09.2018 / oberset

Компонент высшего порядка в React (Higher Order Component или сокращенно HOC) – это простая javascript-функция, которая принимает на вход один или несколько компонентов и возвращает другой компонент. HOC – наилучший способ многократного использования функциональных React-компонентов.

HOC часто применяют, если нужно передать состояние родительского компонента в качестве свойств (props) дочернему компоненту. Рассмотрим простой пример: import React, {Component} from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 } } handleClick = () => { this.setState(({count}) => ({ count: count + 1 })); }; render() { return ( <button onClick={this.handleClick}> Click! </button> ); } } Мы написали компонент, который хранит внутри себя значение счетчика и при клике увеличивает его на единицу. Никакая информация о текущем значении счетчика при этом нигде не выводится.

const CounterView = (props) => { const {count = 0} = props; if (count) { return (<span>Текущее значение: {count}</span>); } else { return (<span>Значение не установлено</span>); } }; Теперь мы добавили компонент CounterView для отображения счетчика, который получает текущее значение в виде свойства count. Осталось связать эти два компонента, чтобы они могли взаимодействовать между собой. Для этого нужно переписать Counter так, чтобы он превратился в HOC.

const getCounter = (View) => { class CounterComponent extends Component { constructor(props) { super(props); this.state = { count: 0 } } handleClick = () => { this.setState(({count}) => ({ count: count + 1 })); }; render() { const {count} = this.state; return ( <div> <button onClick={this.handleClick}> Click! </button> <View count={count} /> </div> ); } } return CounterComponent; };

Теперь можно создать и отобразить счетчик: const Counter = getCounter(CounterView); ... <Counter />

Начальное значение:

  • Начальное значение счетчика

Значение после клика:

  • Значение счетчика после клика

В чем преимущество использования HOC? На первый взгляд может показаться, что компонент для отображения значения счетчика можно было напрямую использовать в методе render основного компонента и не писать обертку в виде «Хока», но в построении приложений на React это было бы не лучшее решение. Этот пример достаточно прост, но реальный код приложения может быть намного сложнее. Дело в том, что определив HOC нам будет проще управлять отображением счетчика, передавая нужный компонент в качестве параметра, не «хардкодя» его внутри метода render родительского компонента. Если нам в каком то случае потребуется отобразить значение счетчика по-другому, мы просто передадим другой компонент как параметр функции getCounter. Таким образом, с помощью «Хоков» можно легко собрать композицию из простых функциональных компонентов.

Обзоры по теме:
Комментарии (0)

Зарегистрируйтесь или авторизуйтесь, чтобы оставлять комментарии.