React 精要面试题讲解(五) 高阶组件真解

说明与目录 在学习本章内容之前，最好是具备react中‘插槽(children)’及‘组合与继承’ 这两点的知识积累。 详情请参照React 精要面试题讲解(四) 组合与继承不得不说的秘密。 哦不好意思忘记了，四还没写呢。==！回头补上。 __首先，我们要知道高阶组件能够做到什么： 对复用UI、数据逻辑等进行封装，对参数组件进行制式处理，从而让参数组建具备特定的ui或功能__ 那么本节的学习目录：

高阶函数的认知

类的修饰器(decorator)的认知(类比高阶函数)

高阶组件的认知(类比修饰器)

高阶组件的两种形式(类比插槽)

高阶组件之组合(代理)类型的高阶组件

高阶组件之继承类型的高阶组件

高阶组件的认知总结

必须深刻认知，以上内容是循序渐进且相互关联的关系，按照流程，我们将彻底把高阶组件安排的明明白白，玩个透彻。

1. 高阶函数的认知 在本系列之前的学习中，你应当明白——组件的本质是函数。 那么什么是高阶函数？ 高阶函数也是一个函数，__它接受函数为参数,返回处理过后的函数或者一个新函数__。 那么我们知道，高阶函数的作用是对参数函数进行统一的加工处理。 形如： //这里我们写了一个函数作为之后的参数 //思考一下为什么把参数函数定义在上面 function testedFunc(){ this.a = 1; } // 在此定义一个高阶函数 function highOrderFunc(func){ func.prototype.aaa = 3; return func; } //这里测试一下我们写的高阶函数 var newFunc = highOrderFunc(testedFunc); //打印看看处理后的函数原型及实例 console.log(newFunc.prototype,1); console.log(new newFunc(),2);

（别那么懒，赶紧复制粘贴f12）
打印结果如下：

那么我们知道了，高阶函数 作用是 处理(加工)传入的函数，以达成某种目的… 2. 类的修饰器(decorator)的认知

ES6增添了class类，我们知道，类的本质也是函数。

class testClass{ a = 1; } console.log( typeof testClass) 打印结果如下：

那么类的修饰器——decorator 是个怎样的东西咧？ __类的修饰器是es6的提案之一，在es7标准中实现。 修饰器也是一个函数，把传入的原有类修饰一下，return 出处理后的类或新类。__ 这时候我们脑海中应该闪过一个词——高阶类…(？？？黑人问号) 不觉得太难听了吗？

ok,我们还是以代码来演示一下：

//注意，下面这种@xx的写法是修饰器的标准写法，是属于es7的产物，要用babel哦~ //定义一个修饰器decF function decF(adornedClass){ return class extends adornedClass{ b= 2 } } // 使用方式1 ： @decF @decF class foo{ a = 1 } console.log( new foo(),1) class bar{ a='bar' } // 使用方式2 ： decF(); const newBar = decF(bar); console.log( new newBar(),2);

打印如下：

瞧啊，修饰器就是这么个东西。
要注意的是，类的修饰器能否修饰函数？为什么？
// 可以自己去找答案，再讲别的就跑题了。
___

3. 高阶组件的认知(类比修饰器)

那么经过类的修饰器的认知，高阶组件的概念就很明朗了。
React高阶组件(high-order-component,简称hoc)就是一个类的修饰器啊…它接受一个组件类为参数，返回出一个新的组件类;
形如：

// 用法1 高阶函数式写法 hoc(WrapedComponent); // 用法2 decorator 修饰器写法 @hoc class A extends React.Component{ //... }

大家有木有很眼熟啊 ？

ok， 我们写一个常规的高阶组件并暴露出去;

export default WrapedComponent => class NewComponent extends React.Component{ render(){ return <WrapedComponent a = '添加了一个属性' /> } }

这种箭头函数的写法好理解吧。
如代码所示，我们写了一个高阶组件，返回的新组件 NewComponent里，用组合的形式使用了传入的组件WrapedComponent。（所以不明白组合与继承的童鞋，赶紧补一补再来看啊）
这里有人问 connect为啥两个括号啊

//形如 connect(func1,func2 )( WrapedComponent)

OK ，我们也手写一下它。

export default (func1,func2)=>WrapedComponent=>class NewComponent extends React.Component{ // .... }

这个两层箭头函数好理解吧？