前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >由重构react组件引发的函数式编程的思考

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

作者头像
2014v
发布2019-11-20 11:33:24
8700
发布2019-11-20 11:33:24
举报
文章被收录于专栏:2014前端笔记

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

最近在重构react组件时,学习了一些高阶组件的编写思路,其实是由高阶函数沿伸而来。 一般情况我们编写一个react组件大致样子如下:

代码语言:javascript
复制
class App extends Component {
    constructor(props){}
    life cycle(){}
    method(){}
    render(){}
}

在编写一个基础组件我们会更多的将需要配置的东西通过props传递进来,那么高阶组件是什么样子的呢? 个人理解高阶组件就是react中复用组件逻辑的一种技巧,先来个高阶函数压压惊:

代码语言:javascript
复制
function add(a,b){
    return a+b
}

如果我希望在函数处理的过程中能够实时追踪这个值并且打印出来呢,我们会这样处理:

代码语言:javascript
复制
function add(a,b){
    console.log(a+b)
    return a+b
}

可是当我们有很多这样的小功能,比如加减乘除之类的,那我们就要把打印那句话写很多遍,有什么办法偷个懒呢?

代码语言:javascript
复制
function log(func){
    return function (){
        var args = Array.prototype.slice.call(arguments)
        var res = func.apply(null,args)
        console.log(res)
        return res
    }
}
//感觉和koa的中间件有点神似

高阶组件的编写也比较类似

代码语言:javascript
复制
function hoc(Wrap){
    return class App entends Component {
        render (){
            return <Wrap {...props}/>
        }
    }
}

其实写到这里高阶函数究竟好在哪里我还没有体会出来,如果说对于一个组件而言我们将view层和逻辑层代码当成参数传递进去,这样我们在开发组件的时候只需要把逻辑层和展示层组装一下就能拼成一个业务组件,但仔细思考一下其实对于一开始提出的编写方式也能实现类似的功能,只需要将逻辑抽象成配置项就可以,而且对于这种高阶组件还有一种实现方式就是继承式

代码语言:javascript
复制
const App = (props) => {
    return class Child entends Parents{
        render (){
            return <div>{super.render()}</div>
        }
    } 
}

通过继承的方式最好的应该就是能获取到父类的state,但是要注意的就是小心会覆盖父类中的方法,其实这种方式也可以通过import一个组件的方式来引入父类。

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 对于高阶组件的使用场景如果有相关经验的或者有不同的见解的希望能够在文末留言
相关产品与服务
消息队列 TDMQ
消息队列 TDMQ (Tencent Distributed Message Queue)是腾讯基于 Apache Pulsar 自研的一个云原生消息中间件系列,其中包含兼容Pulsar、RabbitMQ、RocketMQ 等协议的消息队列子产品,得益于其底层计算与存储分离的架构,TDMQ 具备良好的弹性伸缩以及故障恢复能力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档