Объясните простым языком Higher Order Component в React?

Question

[zooll]

Всем Привет, обьясните пожалуйста простым языком Higher Order Components в React, сколько не просмотрел руководств, все равно не понимаю в чем же смысл использования этого зоопарка классов и функций. По сути ведь получаем на выходе почти тоже самое как с обычными реакт компонентами. Кажется я явно что-то недопонимаю в этой области. Целые библиотеки созданы с упором на это, например всякие Recompose. Прошу максимально простого обьяснения как это работает и какую проблему решает.

Answer 1

[Даниил Колесниченко]

Первая ссылка в гугле: https://facebook.github.io/react/docs/higher-order...

a higher-order component is a function that takes a component and returns a new component

Короче говоря, компонент высшего порядка - декоратор, который добавляет к какому-то (произвольному) компоненту какую-то дополнительную логику. Например Вы можете написать функцию которая принимает компонент и возвращает такой же компонент, только с какой-нибудь дополнительной логикой обработки нажатия мыши. Такая функция и будет компонентом высшего порядка. После написания её можно применять к любым компонентам, а так же комбинировать с другими компонентами высшего порядка (читайте про композицию функций, ничего специфичного для реакта здесь нет).

Answer 2

[Islam Ibakaev]

замени слово component на слово function и всё поймёшь

Answer 3

[Андрей]

Зачем нужен декоратор? , это типа паттерн decorator примененный в react-e компонентами