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

leone 发布于2019-08-20 18:23 / 2872人阅读

摘要：对于高阶组件的使用场景如果有相关经验的或者有不同的见解的希望能够在我的博客下面留言最近在重构组件时，学习了一些高阶组件的编写思路，其实是由高阶函数沿伸而来。

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

最近在重构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 
        }
    }
}

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

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

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

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

GPU云服务器云服务器函数式组件函数式编程函数式编程指针函数式编程语言?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84450.html

SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

摘要：函数式编程，一看这个词，简直就是学院派的典范。所以这期周刊，我们就重点引入的函数式编程，浅入浅出，一窥函数式编程的思想，可能让你对编程语言的理解更加融会贯通一些。但从根本上来说，函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程（Functional Programming），一...

csRyan 2019-08-22 10:50 评论0 收藏0
前端每周清单半年盘点之 React 与 ReactNative 篇

摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

Barry_Ng 2019-08-22 10:54 评论0 收藏0
React 组件设计和分解思考

摘要：我们可以在组件的设计上，玩转出很多花样。但是，如何对一个功能复杂且臃肿的组件进行分解，也许并不是一件简单的事情。同时，借助于新的算法引擎，两个单元组件在渲染的效率上，乐观地预计会有较大幅度的提升。之前分享过几篇关于React技术栈的文章：做出Uber移动网页版还不够极致性能打造才见真章解析Twitter前端架构学习复杂场景数据设计 React Conf 2017 干货总结1...

liukai90 2019-08-20 17:35 评论0 收藏0
【译】Redux 还是 Mobx，让我来解决你的困惑！

摘要：我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的，因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式，但对于大部分开发者来说是新奇的。规模持续增长的应原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 评论0 收藏0