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

11.09.2018
/
oberset

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

HOC часто применяют, если нужно передать состояние родительского компонента в качестве свойств (props) дочернему компоненту. Рассмотрим простой пример:
import React, {Component} from 'react';

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
}
}

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. Таким образом, с помощью «Хоков» можно легко собрать композицию из простых функциональных компонентов.