React中的高阶组件(HOC)

Higher-Order Components就是一个函数，传给它一个组件，它返回一个新的组件。

作用:让功能像组件一样可以复用

案例:我有一个轮播图,需要在A组件用,也需要在B组件用

import React,{ Component,Fragment } from 'react'

//定义一个带着需要复用的方法的组件
const Hoc = ( Comp ) => {
    return class Banner extends Component{
        banner () {
            //这是一个方法这个方法是轮播图
            return 'banner'
        }
        render () {
            return <Comp banner = { this.banner }></Comp>
        }
    }

}

//定义需要使用轮播图功能的两个组件
class A extends Component {
    render () {
        return (
            <Fragment>
               <h3>A组件</h3>
               { this.props.banner() }
            </Fragment>
        )
    }
}

class B extends Component {
    render () {
        return (
            <Fragment>
               <h3>B组件</h3>
               { this.props.banner() }
            </Fragment>
        )
    }
}

//用定义的Hoc包裹A组件和B组件
const HocA = Hoc( A )
const HocB = Hoc( B )

class C extends Component {
    render () {
        return (
            <Fragment>
                <h3>C组件</h3>
                <HocA></HocA>
                <hr></hr>
                <HocB></HocB>
            </Fragment>
        )
    }
}

export default C