React高阶组件的封装和使用

什么是高阶组件？本质上是一个纯函数，所以高阶组件也叫高阶函数；因为高阶组件可以修饰我们普通的UI组件，所以高阶组件也叫做容器组件

高阶组件有什么用？是一种代码逻辑复用的技巧，是一种设计模式(React开发经验)

高阶组件的基本特点：它接收一个UI组件作为参数，经过一层‘修饰’，返回一个新组件

// 高阶组件的语法
function page(WrappedComponent) {
    // 定义一个新的组件
    class NewComponent extends PureComponent {
        render() {
            return (
                // Fargment解决单一根节点的问题，还不会改变代码结够，相当于空，简写 <></> 
                <Fragment>
                    <WrappedComponent />
                    <fooetr>我是公共部分</fooetr>
                </Fragment>
            )
        }
    }
    return NewComponent
}


// 定义一个普通类组件
class TestHoc extends PureComponent {
    constructor(props) {
        super(props)
    }
 render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}

// 使用高阶组件
//