В Javascript у нас есть функции более высокого порядка, которые в основном являются функциями, принимающими функции. В реакции компонент более высокого порядка — это в основном функции, которые принимают компонент в качестве параметра, вводят или изменяют его реквизиты и возвращают измененный компонент.

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

Итак, давайте начнем с практического примера: -

Создайте компонент реакции с помощью приложения create-реагировать и удалите шаблонный код из App.js.

class App extends  Component {
 render() {
  return (
 <div className=”App”>
 
 </div>
 );
 }
}
export default App;

Теперь создайте ButtonWrapper.js, который будет экспортировать наш HOC:

const translateProps = (props) => {
 let modifiedStyle = { …props }
 if (props.disable) {
 modifiedStyle = { color: ‘red’ }
 }
 else {
 modifiedStyle = { color: ‘green’ }
 }
 return modifiedStyle;
}
export default (ButtonWrapper) => {
 return function toBeRendered(props) {
      return ButtonWrapper(translateProps(props))
 }
}

Здесь у нас есть функция, экспортированная по умолчанию, которая принимает параметр, который является компонентом, а затем возвращает этот компонент, передавая ему новые реквизиты. Здесь я решил на основе переданных реквизитов.

Теперь создайте RenderButton.js, который будет функциональным компонентом:

import React from ‘react’;
import ButtonWrapper from ‘./ButtonWrapper’
const RenderButton = (props) => {
 return (
 <button style={props}>Click me</button>
 )
}
export default ButtonWrapper(RenderButton)

Теперь измените App.js и включите компонент RenderButton:

<div className=”App”>
 <RenderButton disable></RenderButton>
</div>

По сути, мы использовали RenderButton только для отображения кнопки, но внутри RenderButton мы просто экспортировали RenderButton Wrapped внутри HOC, который меняет свои стили на основе реквизитов, переданных в RenderButton.

В нашем примере, если мы передаем disable как true, кнопка будет красной, в противном случае — зеленой.

Очевидно, что это можно сделать с помощью условного рендеринга или изменения свойств в RenderButton только на основе условия if, но основная концепция HOC заключается в поддержании контекста, если компонент может использоваться по-разному, а не в реализации логики только в компоненте. мы должны извлечь логику на другой уровень, чтобы компонент оставался чистым.

Код см. на моем github: https://github.com/piyush96arora1/react-hoc-demo