Higher Order Component
Компонент высшего порядка - это функция, принимающая компонент и возвращающая новый компонент. Это продвинутая техника, позволяющая повторно использовать логику компонента. HOC не являются частью React API. HOC является паттерном, производным от композиционной природы React. Компонент преобразует пропы в UI, а HOC трансформирует один компонент в другой. Примерами популярных HOC являются методы connect() в Redux и createContainer() в Relay.
// HOC.js
import React, { Component } from 'react'
export default function Hoc(HocComponent){
return class extends Component{
render(){
return (
<div>
<HocComponent></HocComponent>
</div>
)
}
}
}
// App.js
import React, { Component } from 'react'
import Hoc from './HOC'
class App extends Component {
render() {
return (
<div>
Пример компонента высшего порядка!
</div>
)
}
}
App = Hoc(App)
export default App
Обратите внимание:
Мы не модифицируем компоненты, а создаем новые.
HOC используются для композиции компонентов для обеспечения возможности повторного использования кода.
HOC являются "чистыми" функциями. Они не имеют побочных эффектов (side effects) и всегда возвращают одинаковые результаты для одних и тех же аргументов.
👉 @seniorFront