一、什么是高阶函数(组件),作用是什么?

子类使用父类的方法可以通过继承的方式实现,那无关联组件通信(redux)、父类使用子类方法(反向继承)呢

为了解决类(函数)功能交叉/功能复用等问题,通过传入类/函数返回类/函数(继承)的方式使得类拥有自身未定义的方法。

例如react-redux的connect方法使用了高阶组件:

React Redux的connect:

const HOC = connnect(mapStateToProps)(Comp);
// connect为柯里化函数 实际为 =>
function connect(mapStateToProps) {
// ...
return function(Comp) {
// ...
}
}
// 使用箭头函数则为
const connect = mapStateToProps => Comp => {...};

二、通过高阶函数实现两个无关函数的通信

需求介绍

存在一个类SubClass(子类),该类范围内有数据state对象,且有setState和getState两个函数方法。现在希望通过SupClass1(超/父类1)去调用SubClass(子类)的setState方法,并在SupClass2(超/父类2)里通过getState方法输出结果。

注意,子为sub,父为sup

文件目录

├  ├── SubClass.js              # 子类
├ ├── SupClass1.js # 父类1
├ ├── SupClass2.js # 父类2
├── index.html

SubClass类增加数据state,并赋予查询修改的能力

// SubClass.js
class SubClass {
constructor(args = {}) {
this.state = {
...args,
};
}
// 赋值时需要提供键和值
setState = (key, val) => {
this.state = {
[key]: val,
};
};
getState = (key) => {
if (key in this.state) {
return this.state[key];
}
// 当然我们希望严谨点
const err = '无效key值';
throw err;
};
}

我们试试SubClass功能如何

// index.html
const subcls = new SubClass({name: 'xiaobe'});
const res = subCls.getState('name');
console.log('res', res);
// 输出xiaobe,妥妥的

接下来我们给SupClass1赋予setState的能力

class SuperClass1 {
set(key, val) {
// SuperClass1里没有setState方法!
this.setState(key, val);
}
}

如果直接执行类里的get方法肯定是会出错的。所以我们需要先对SupClass1做点事情。

需要给SuperClass1类里增加方法setState,可以使用继承

// SuperClass1.js
class SuperClass1 extends SubClass {
constructor(props) {
super(props);
}
set(key, val) {
// 父类1上使用子类的setState方法
this.setState(key, val);
}
} // index.html
const supCls1 = new SuperClass1({name: 'sup-xiaobe'});
const res = supCls1.getState('name');
console.log(res);
// 也能输出sup-xiaobe

但如果单纯使用继承的方式会造成很多的麻烦。例如子类和父类如果有同名方法,默认子类会覆盖基类(父类的其他叫法)的同名方法,如果基类方法使用了函数绑定或箭头函数,其this的指向就改变了,指向了基类,导致自身同名方法失效。

因此我们还是需要通过高阶组件实现;

首先我们先给子类SubClass增加一个HOC入口

class SubClass {
// ...
HOC(cls) {
// 需要调用SubClass类的方法,所以需要存一份其this
const sub_this = this;
// 父类除了以下新增的两个方法,其他无任何变化地返回!
return class extends cls {
constructor(props) {
super(props);
// 此处this指向该子类,sub_this指向SubClass类
this.getState = sub_this.getState;
this.setState = sub_this.setState;
}
}
}
// ...
}

接着我们来父类1SupClass1实例化前升级(调用HOC)!

// index.html
const subCls = new SubClass();
// 在子类实例化后给父类加上HOC方法
const supClsHoc1 = subCls.HOC(SuperClass1);
// 实例化父类
const supCls1 = new supClsHoc1();
// 重新定义state.name
supCls1.set('name', 'sup-xiaobe'); console.log(supCls.getState('name'));
// 输出sup-xiaobe

同理地完成SupClass2

// SupClass2.js
class SuperClass2 {
get(key) {
return this.getState(key);
}
} // 最终的index.html
const subCls = new SubClass({name: 'xiaobe'});
const supClsHoc1 = subCls.HOC(SuperClass1);
const supClsHoc2 = subCls.HOC(SuperClass2);
const supCls1 = new supClsHoc1();
const supCls2 = new supClsHoc2(); supCls1.set('name', 'sup-xiaobe');
const res = supCls2.get('name');
console.log('res', res);

这么一个基础简单的组件通信就完成了。

根据这个思路可以封装一个类似全局变量的Store.js

思考个问题

高阶函数HOF和高阶组件HOC(Higher Order Func/Comp)的更多相关文章

  1. 高阶函数 HOF & 高阶组件 HOC

    高阶函数 HOF & 高阶组件 HOC 高阶类 js HOC 高阶函数 HOF 函数作为参数 函数作为返回值 "use strict"; /** * * @author x ...

  2. Kotlin的高阶函数和常用高阶函数

    Kotlin的高阶函数和常用高阶函数 文章来源:企鹅号 - Android先生 高阶函数的定义 将函数当做参数或者是返回值的函数 什么是高阶函数 可以看看我们常用的 函数: 首先我们可以知道, 是 的 ...

  3. 高阶组件&&高阶函数(一)

    antd里面的form表单方面,遇到一个高阶函数,以及高阶组件,于是看了一下这方面内容,前辈们的文章写得也非常详细,这里就稍微kobe一下 高阶函数与高阶组件 高阶函数: 高阶函数,是一种特别的函数, ...

  4. JavaScript ES6函数式编程(一):闭包与高阶函数

    函数式编程的历史 函数的第一原则是要小,第二原则则是要更小 -- ROBERT C. MARTIN 解释一下上面那句话,就是我们常说的一个函数只做一件事,比如:将字符串首字母和尾字母都改成大写,我们此 ...

  5. React.js高阶函数的定义与使用

    /* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...

  6. React事件处理、收集表单数据、高阶函数

    3.React事件处理.收集表单数据.高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) ...

  7. [Effective JavaScript 笔记]第19条:熟练掌握高阶函数

    高阶函数介绍 高阶函数曾经是函数式编程的一个概念,感觉是很高深的术语.但开发简洁优雅的函数可以使代码更加简单明了.过去几年中脚本语言采用了这些个技术,揭开了函数式编程的最佳惯用法的神秘面纱.高阶函数就 ...

  8. C#函数式编程-高阶函数

    随笔分类 -函数式编程 C#函数式编程之标准高阶函数 2015-01-27 09:20 by y-z-f, 344 阅读, 收藏, 编辑 何为高阶函数 大家可能对这个名词并不熟悉,但是这个名词所表达的 ...

  9. Javascript 闭包与高阶函数 ( 一 )

    上个月,淡丶无欲 让我写一期关于 闭包 的随笔,其实惭愧,我对闭包也是略知一二 ,不能给出一个很好的解释,担心自己讲不出个所以然来. 所以带着学习的目的来写一写,如有错误,忘不吝赐教 . 为什么要有闭 ...

随机推荐

  1. LOJ 10239 有趣的数列

    LOJ 10239 有趣的数列 首先可以将奇数视作入栈,偶数视作出栈,那么它是卡特兰数,其实打表也能看出来,而且好像可以用dp? 不过这道题的难点不在这里,p不是素数,所以不能用求逆元来做,不过前50 ...

  2. hdu 3938 Portal (prim+离线)

    Problem - 3938 题意是要求出给定权值下,满足要求的点对的数目.所谓的要求是,给出两点,之间会有很多路径,这个点对的最小距离是众多路径中,最短的一条路径的长度,路径长度是路径上最长边的长度 ...

  3. MaxCompute 预付费标准版VS套餐版

    MaxCompute 于5月7日正式售卖预付费(包年包月)套餐资源,主打存储密集型套餐,一共三个套餐: 存储密集型160套餐 存储密集型320套餐 存储密集型600套餐 本文主要给大家介绍预付标准版和 ...

  4. oracle的group by用法

    原文链接:https://www.cnblogs.com/Each-Person-Got-a-Dream/p/8946961.html sql如下: select min(es.sku_price) ...

  5. C++ sort使用两个参数来排序

    排序在编程中经常用到,冒泡法排序时间复杂度高,使用C++库函数sort可以快速排序. 1.必须的头文件#include < algorithm>和using namespace std;  ...

  6. 使用Laravel的队列实现系统通知、

    使用Laravel的队列实现系统通知. 第一步:创建 jobs表的migrate php artisan queue:table 第二步:创建jobs 表 php artisan migrate 第三 ...

  7. css的一些小问题

    这是今天整理的笔记一.属性书写顺序: Formatting Model(布局方式.位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视 ...

  8. JS 复制文本兼容移动端 iOS & android

    有几个需要注意的地方. 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本. 另外如果将 input 设置为 `type="hidden&quo ...

  9. Python--day27--设计模式

    设计模式:单例模式

  10. element-ui-——el-uploadexcel导入

    布局文件:(选择文件放在了弹框内部——即点击导入按钮后弹框显示,先下载模板再选择文件点击提交按钮才上传) )) { this.$notify({ message: '数据导入成功', type: 's ...