Senior Frontend - javascript, html, css(@seniorFront). Higher Order Component Компонент высшего порядка - это функция, принимающая компонент и возвращающ

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