3.3 HOC高阶组件

HOF：Higher-Order Function 高阶函数，以函数作为参数，并返回一个函数
HOC：Higher-Order Component ,高阶函数，以组件为参数，并返回一个组件

注意
1.不要在render中使用高阶组件
2.不要在高阶组件内部更改传入的组件

通常，可以利用HOC实现横切关注点。

//高阶组件

import React from 'react'
export default function withLog(Comp, str) {
    return class LogWrapper extends React.Component {
        componentDidMount() {
            console.log(`日志：组件${Comp.name}被创建了 ${Date.now()}`)
        }

        componentWillUnmount() {
            console.log(`日志：组件${Comp.name}被销毁了！ ${Date.now()}`)
        }

        render() {
            return (
                <>
                    <h1>{str}</h1>
                    <Comp {...this.props} />
                </>

            )
        }
    }
}
    

import React from 'react'

export class A extends React.Component {
    render() {
        return <h1>a:{this.props.a}</h1>
    }
}

export class B extends React.Component{
    render(){
        return <h1>b:{this.props.b}</h1>
    }
}

//使用
import React from 'react'
import Comp from '../../components/Hoc'
import { A, B } from '../../components/comp'
let CompA = Comp(A,'abc')
let CompB = Comp(B,'bcc')
export default class App extends React.Component {
  render() {
    return (
      <div>
        <CompA  a={1}/>
        <CompB  b={2}/>
      </div>
    )
  }


}