Возможно, вы знакомы с функциями более высокого порядка в JavaScript. Это функции, которые принимают функции в качестве аргументов и/или возвращают функции.

Двумя примерами таких функций являются Array.map() или Array.filter() .

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

В общем, компоненты более высокого порядка позволяют создавать код, который можно комбинировать и повторно использовать, а также более инкапсулированный.

Мы можем использовать СПОСОБ добавления методов или свойств в состояние компонента или, например, хранилище Redux.

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

Существует соглашение о предварении компонента более высокого порядка строкой with (это соглашение, поэтому оно не является обязательным), поэтому, если у вас есть компонент Button , его специальный аналог должен называться с кнопкой .

Давайте создадим его.

Самый простой пример HOC – это тот, который возвращает компонент без изменений:

const withElement = Element => () => 

Давайте сделаем это немного более полезным и добавим свойство к этому элементу, в дополнение ко всем реквизитам, с которыми он уже поставляется, цвет:

const withColor = Element => props => 

Мы используем этот HOC в компоненте JSX:

const Button = () => {
  return test
}

const ColoredButton = withColor(Button)

и мы наконец можем визуализировать компонент обернутой кнопки в нашем приложении JSX:

function App() {
  return (
    

      
Hello
      
    
  )
}

Это очень простой пример, но, надеюсь, вы сможете понять суть HOC, прежде чем применять эти концепции к более сложным сценариям.

Оригинал: “https://flaviocopes.com/react-higher-order-components/”