高阶组件HOC

高阶组件HOC

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

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

高阶组件：(HOC) Higher-Order-Component

为了提⾼组件复⽤率，可测试性，就要保证组件功能单⼀性；但是 若要满⾜复杂需求就要扩展功能单⼀的组件，在React⾥就有了 HOC（Higher-Order Components）的概念，

定义：⾼阶组件是⼀个⼯⼚函数，它接收⼀个组件并返回另⼀个组件。简单来说就是组件复用

封装一个具有版权信息的高阶组件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)