高阶组件学习笔记（一）

高阶组件学习笔记（一）
高阶函数
高阶函数定义
函数可以作为参数被传递，函数可以作为函数值输出。
高阶函数案例
1、setTimeOut(()=>xxx,1000),，()=>xxx函数作为参数传递，说明setTimeOut是高阶函数。
2、function add(x, y, f) {
return f(x) + f(y);
}，add函数接收的三个参数x、y、f，其中f是作为一个函数。该函数最终的返回结果是一个函数，这就是一个简单的高阶函数。
JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数（阮一峰）。
在JavaScript里面，函数是一种放内存方法区里面的特殊数据结构，是一个变量（不是Java里面的引用类型）


地位等同于字符串之类的，只是一个变量。（个人理解）
高阶组件
高阶组件定义
高阶组件，接受组件作为参数，并返回新组件的函数。高阶组件是一个函数，不是组件！
高阶组件是基于高阶函数的一种工厂函数，用于包裹原来的组件，使得原来的组件功能加强。
高阶组件的意义
1、多个组件都需要某个相同的功能，使用高阶组件减少重复实现。
2、更加动态地扩展功能。

高阶组件的写法

1.实现一个普通组件。

　　2.把普通组件用函数包裹，并用return 抛出,函数要接受一个参数。

编写一个普通组件，然后将普通组将作为一个返回结果放在一个对外暴露的函数里面。

高阶组件的使用
1、嵌套包裹式：higherOrderComponent(Com)

2、装饰器式：@higherOrderComponent

使用装饰器注意的地方：
1、使用 script里面的eject命令，获取对webpack的控制权。
2、安装babel装饰器的依赖cnpm install @babel/plugin-proposal-decorators
3、添加配置

React装饰器模式：

高阶组件应用场景
1、用于定义一种设计模式。
2、代码复用，逻辑抽象。shareui的组件底层使用（bootstrap-react）的代码
3、渲染劫持，高阶函数劫持组件的渲染方法（render）。
4、State 抽象和更改。
5、Props 更改。