react 高阶组件

react 高阶组件：

我的理解就是原来的功能不强，需要加强
这个概念好理解，就比如Java中，对原来类进行
扩充（装饰） 一般采用组合或者继承的方式

而在我们的react （重点是jsx )语法，函数也是组件
那你对函数进行扩充，用函数来包裹一下就行了！

有些时候我们写代码，刚开始不理解，多写几遍就成为定势了！
也就是总这么写的问题
下面我手写个高阶组件函数！

   // v1 传递个组件，返回一个组件（函数形式）
            const Hoc = (Component)=>{

                return newComp;
            }


            //v2 ,里面的函数组件，就是对Component 进行包装
            const Hoc = (Component)=>{
                
                // 实际使用就是newComp 这个函数组件
                const newComp = (props)=>{
                    // 这里原封不动的使用 要包裹的组件
                    <Component {...props}></Component>
                }
                return newComp;
            }

            总结下，Hoc 函数对Component 组件进行扩充，而扩充后的组件实际上是 newComp;
            export default  Hoc(Component);

总之就是一个函数，形参是组件，返回值是新的函数（也是新的组件）

高阶组件
高阶组件HOC（Higher-Order Components）是React中重用组件逻辑的高级技术，它不是react的api，而是一种
组件增强模式。高阶组件是一个函数，它返回另外一个组件，产生新的组件可以对被包装组件属性进行包装，也可
以重写部分生命周期

const withKaikeba = (Component) => {
        const NewComponent = (props) => {
    return <Component {...props} name="开课吧高阶组件" />;
    };
        return NewComponent;
};

每次使用我们都需要调用完函数再使用

比如有个Cart 组件 要进行装饰，

我们首先要

const  NewCart = Hoc(Cart);

然后再使用

<NewCart></NewCart>

这样写太麻烦，假如需要多次装饰，那么就需要多次重复以上逻辑

为了解决这个问题，可以对类组件进行装饰（用那个注解方式）

npm install -D @babel/plugin-proposal-decorators

配置我给大家截图：

使用就简单了

// 高阶组件函数！
const Hoc = (Component) => {
    const name = "java";
    const newComponent = (props) => {
        return (
            <Component {...props} name={name}></Component>
        );
    }
    // 返回一个函数！函数也是组件！
    return newComponent;
}


// 对这个组件进行高阶组件
@Hoc
class Show extends Component {
    constructor(props) {
        super(props);

    }
    render() {
        return (
            <div>
                show --{this.props.name}--
                <Button type="primary">ok</Button>
            </div>
        );
    }

}

行，多次注解时,

顺序从上往下执行
我以前学习Java放弃了，只学到了一些概念，希望大家不要走我的弯路