高阶组件HOC

高阶组件HOC

高阶函数：一个函数内部返回一个新的函数，内部采用闭包的写法。

var add = x => {
  return y => {
  	return x+y
  }
}
//调用add
add(3)(1)

高阶组件：（HOC） Higher-Order-Component

高阶组件本质上就是一个函数，内部可以接收一个组件，然后返回新的组件；简单来说就是组件复用

例如： React.memo() connect()

封装一个具有版权信息的高阶组件WithCopy,内部接收一个组件，最终返回一个新的组件。

import React, { Component } from 'react'
//定义一个高阶组件WithCopy 本质上是一个函数，接受一个组件，返回一个全新的组件。
//connect()(UIComponent)  只需要通过this.props.xxx可以获取到传递来的属性了
//类组件 函数式组件（无状态组件）
//表单元素而言  受控、非受控
//HOC高阶组件 ：redux中connect()  React.memeo(functional component)
const WithCopy = Comp=>{
    return class WithCopyComp extends Component{
        render(){
            return (
                <div>
                    <Comp name={this.props.name}/>
                    版权信息&copy;
                </div>
            )
        }
    }
}
export default WithCopy

创建一个About.js调用WithCopy组件

import React, { Component } from 'react'
import WithCopy from './WithCopy'
 class About extends Component {
    render() {
        return (
            <div>
                关于-{this.props.name}
            </div>
        )
    }
}
export default WithCopy(About)