react的高阶组件

react的高阶组件

高阶组件的作用就是实现组件复用，节省内存

• 先定义一个函数式组价，传入一个参数，这个参数就是组件
• 组件内返回一个class类组件，类名可以写也可以不写
• 类组件内部可以写方法，数据，然后将参数当做组件返回出去，并将方法或者数据，传个这个组件

代码

    
import React,{ Component } from 'react';

const Hoc = ( Comp ) =>{//参数首字母必须大写，必须要有返回值，在下面使用
    return class banner extends Component{ //类名可以省略，省略的话标签名就是以temp或者其他的代替，必须要有返回值
        banner = () => {//这里是实现某个功能的函数代码
            return 'zhangyue'
        }
        render () {
            return (
                <Comp banner = { this.banner }></Comp>//将参数当做一个组件返回出去
            )
        }
    }
}
class A extends Component{
    render () {
        return (
            <div>
                <p> A组件 </p>
                { this.props.banner() }//在下面使用了高阶组件后，这里就可以直接使用里面的方法了
            </div>
        )
    }
}

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

const HocA = Hoc(A)//组件名必须首字母大写，将组件名当参数传进去，这样这个组件就有高阶组件内的方法了
const HocB = Hoc(B)


class C extends Component{
    render () {
        return (
            <div>
                <p> C组件 </p>
                <HocA></HocA>//这里使用的高阶组件
                <HocB></HocB>
            </div>
        )
    }
}
export default C