由重构react组件引发的函数式编程的思考

[z2014]

对于高阶组件的使用场景如果有相关经验的或者有不同的见解的希望能够在文末留言

最近在重构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一个组件的方式来引入父类。

所以目前为止，我所接触到的业务场景，并没有突出高阶组件好在哪里。。。。

[z2014]

这几天看了同事写的一些高阶组件后，又有了一点新的组件设计思路：

其实对于这种设计思路，还是可以追溯到关于函数式编程和面向对象编程的思想上， 原来我们对一个组件进行抽象化，主要是做数据层面的抽象，也就是将数据抽象出来，但是处理数据的逻辑还是写在组件内部，函数式编程的好处就在于它可以面向过程，也就是可以将处理数据的逻辑抽象出来。

再写一个高阶组件的时候，我们可以对于一个组件这样分层，process为数据处理层，view为数据展示层，这样我们的view层就能够根据数据和process层来决定展示的内容，可能函数式编程这样的思想和es7的装饰器又有一些相同的地方