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

2014v

发布于 2019-11-20 11:33:24

8700

发布于 2019-11-20 11:33:24

文章被收录于专栏：2014前端笔记

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

react

面向对象编程

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

react

面向对象编程

登录后参与评论

0 条评论

热度