Реагировать на компоненты более высокого порядка

Узнайте, что такое компоненты высшего порядка и чем они полезны при программировании приложения React.

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

Два примера этих функций:Array.map()или жеArray.filter().

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

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

Мы можем использовать HOC для добавления методов или свойств к состоянию компонента илиReduxмагазин например.

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

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

Создадим один.

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

const withElement = Element => () => <Element />

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

const withColor = Element => props => <Element {...props} color="red" />

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

const Button = () => {
  return <button>test</button>
}

const ColoredButton = withColor(Button)

и мы наконец можем отрендерить компонент WrappedButton в нашем приложении JSX:

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
      <ColoredButton />
    </div>
  )
}

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

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции: