Может быть такой компонент компонентом высшего порядка в React?

Question

[AlbertP1207]

//Hoc.js
import React,{Component} from "react"

export default class extends Component{
    state = {
        hovering:false
    }
    mouseOver = () => this.setState({ hovering: true })
    mouseOut = () => this.setState({ hovering: false })
    
    render() {
        const {Comp} = this.props
        return (
            <div onMouseOver={this.mouseOver} onMouseOut = {this.mouseOut}>
                <Comp hovering = {this.state.hovering} />
            </div>
        )
    }
}

//App.js
function A(props) {
  return (
    <div>
      <h1>AAAAAAAAAAAAAA</h1>
      {props.hovering ? <h2>HOVVVVVERING</h2> : null}
    </div>
  )
}

function App() {

  return (
    <div className="App">
      <Hoc Comp = {A}/>
    </div>
  );
}

В документации говорится:

Компонент более высокого порядка или старший компонент - это функция, которая принимает компонент и возвращает новый компонент.

То есть обязательно должен возвращать компонент? Не может просто сделать render компонент который получил с props. По документации получается мы каждый раз должны создать одинаковый класс, а в моем примере мы используем одну...

Answer 1

[Антон Спирин]

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

Answer 2

[Robur]

То что у вас называется просто композиция.
HOC создает новый компонент каждый раз когда вы его используете на основе того компонента который ему передали.

HOC выглядел бы так:

const HocA = makeHOC(A)
const HocB = makeHOC(B)

//... где-то в рендере:
<HocA />

//где-то еще
<HocB />

В чем разница?
В том что в вашем случае ваш Hoc не зависит от того что ему передали и использует A как свойство.
Если вы поменяете A на B то Hoc просто получит новые пропсы и сохранит старый стейт. Вы работаете с инстансом Hoc не меняя его класс (тип)

Когда вы делаете правильный Hoc - то сначала вы создаете два "типа" компонента один для A (HocA) другой для B (HocB)
потом рендерите уже их как самостоятельные компоненты ничего дополнительно не передавая.

Answer 3

[forspamonly2]

тот подход, что у вас, называется "render props". сравнение их по предпочтительности с HOC - предмет постоянного холивара остроконечников с тупоконечниками.

глобально всё можно и так, и так сделать, смотрите как в вашем случае удобнее.