关于高阶组件的运用场景假如有相干履历的或许有差别的看法的愿望能够在我的博客下面留言

最近在重构react组件时，进修了一些高阶组件的编写思绪，实际上是由高阶函数沿伸而来。
平常状况我们编写一个react组件大抵模样以下：

class App extends Component {
    constructor(props){}
    life cycle(){}
    method(){}
    render(){}
}

在编写一个基本组件我们会更多的将须要设置的东西经由过程props通报进来，那末高阶组件是什么模样的呢？
个人明白高阶组件就是react中复用组件逻辑的一种技能，先来个高阶函数压压惊：

function add(a,b){
    return a+b
}

假如我愿望在函数处置惩罚的过程当中能够及时追踪这个值而且打印出来呢，我们会如许处置惩罚：

function add(a,b){
    console.log(a+b)
    return a+b
}

然则当我们有许多如许的小功用，比方加减乘除之类的，那我们就要把打印那句话写许多遍，有什么要领偷个懒呢？

function log(func){
        return function (){
            var args = Array.prototype.slice.call(arguments)
            var res = func.apply(null,args)
            console.log(res)
            return res
        }
    }

//觉得和koa的中间件有点神似
高阶组件的编写也比较相似

function hoc(Wrap){
    return class App entends Component {
        render (){
            return <Wrap {...props}/>
        }
    }
}

实在写到这里高阶函数终究幸亏那里我还没有体味出来，假如说关于一个组件而言我们将view层和逻辑层代码当做参数通报进去，如许我们在开辟组件的时刻只须要把逻辑层和展现层组装一下就能够拼成一个营业组件，但细致思索一下实在关于一开始提出的编写体式格局也能完成相似的功用，只须要将逻辑笼统成设置项就能够，而且关于这类高阶组件另有一种完成体式格局就是继续式

const App = (props) => {
    return class Child entends Parents{
        render (){
            return <div>{super.render()}</div>
        }
    } 
}

经由过程继续的体式格局最好的应当就是能获取到父类的state，然则要注意的就是警惕会掩盖父类中的要领，实在这类体式格局也能够经由过程import一个组件的体式格局来引入父类。

所以目前为止，我所接触到的营业场景，并没有凸起高阶组件幸亏那里。。。。