浅谈高阶组件

我们都知道高阶函数，本文讲的高阶组件最大的特点就是代码复用，逻辑抽象…

最近学会了吉他，再加上是深夜了，所以就配个吉他版夜的钢琴曲

切入正题，就简单粗暴的举例说明吧

简单解释高阶组件，首先示例一个函数

function hello(){
    console.log("hhardyy i love you");
}
hello()

然后高阶组件这么写

function hello(){
    console.log("hhardyy i love you");
}

function newHello(fnc){
    return function(){
        console.log("befor hello")
        fnc()
        console.log("after hello")
    }
}
hello = newHello(hello)
hello()

这种模式就叫装饰器模式，这两hello()使用的时候虽然是一样的，但是内部已经发生了翻天覆地的变化，这是理解高阶组件的第一步，接下来我写个组件

class Hello extends Component{
    render(){
        return <h2>hhardyy test react & 疯狂test react</h2>
    }
}

然后在我的项目中的组件（一个写好的组件就可以）的return中用上，然后打印

高阶组件其实就是一个组件传入另一个组件，而大家也意识到，组件其实就是个函数，我用babel来解析一下这个组件

从这里可以看出来，所有的组件本质上都是一个函数，再举个栗子，我写个专门装饰上面hello组件的函数

function newHello(Component){
    class newHel extends Component{
        render(){
            return (
                <div>
                    <p>高阶组件元素</p>
                    <Component {...this.props}></Component>
                </div>
            )
        }
    }
    return newHel
}
Hello = newHello(Hello)

我们常用的@connect装饰器其实就是这么个原理，这里我假装newHello是从别的地方引进来的，很远很远的地方（怕太远了你们看不到就往上移了几行，假装很远），然后在hello组件上写上@newHello，也就是这个样子

@newHello
class Hello extends Component{
    render(){
        return <h2>hhardyy test react组件 模拟@ & 疯狂test react</h2>
    }
}

来模拟@connect装饰器，这就是最简单的一个高阶组件，也就是给一个组件，然后返回另外一个组件，另外的组件把原来的组件包裹一层，这样就可以在原来的组件之上添加或者修改一些功能

高阶组件主要分两种

属性代理

上面这个组件叫属性代理，我们可以在

1	<Component {...this.props}></Component>

上给name,data等等

反向继承

就是不继承React.Component,而是直接继承原来的组件，这样就可以改写原来component的生命周期，比如这样子

function newHello(Component){
    class newHel extends Component{  //这里的Component不是继承自React的Component，而是传进来的Component
        componentDidMount() {
            console.log("高阶组件新增生命周期完成")
        }
        render(){
            return <Component></Component>
        }
    }
    return newHel
}

这样之后和之前的关系就成了继承的关系，而不是代理的关系，这种方式可以修改它的生命周期，可以修改渲染逻辑以及整个渲染的流程，使用高阶组件的作用主要是代码复用以及逻辑抽象等

有点困，仗着国庆小长假疯狂试探新知识，平均睡觉时间3点

浅谈高阶组件

高阶组件主要分两种

属性代理

反向继承

🤠 请我喝可乐！