当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 01:19:30 HTML5

重构react组件引发的对函数式编程的思考写一些高阶组件的想法其实是从高阶函数延伸出来的。一般来说,我们写一个react组件是这样的:configured是通过props传入的,那么一个高阶组件是什么样子的呢?个人对高阶组件的理解是在react中复用组件逻辑的一种技巧。首先,让我们使用一个高级函数来抑制我的惊讶:会这样处理:functionadd(a,b){console.log(a+b)returna+b}但是当我们有很多这样的小函数,比如加减乘除等等。是的,那我们就得写多次打印这句话。有什么办法可以偷懒吗?functionlog(func){returnfunction(){varargs=Array.prototype.slice.call(arguments)varres=func.apply(null,args)console.log(res)returnres}}//感觉和koa中间件有点类似于高阶组件的写法,也类似于functionhoc(Wrap){returnclassAppentendsComponent{render(){return}}}其实高阶函数写到这里我还没想好有什么用。如果我们将视图层和逻辑层代码作为参数传入一个组件,那么在开发组件时只需要组装逻辑层和表现层即可。放到一个业务组件中,但是仔细想想其实可以实现和开头提出的写法类似的功能,只需要将逻辑抽象成配置项即可,而这个高层还有另外一种实现方式组件是继承constApp=(props)=>{returnclassChildentendsParents{render(){return

{super.render()}
}}}最好的继承方式是获取父类的状态,但是需要注意的是注意父类中的方法会被覆盖。其实这个方法也可以通过导入一个组件来引入父类。到目前为止,我所接触的业务场景并没有突出高层组件的优势。...