什么是装饰器模式
ES6/ES7中的装饰器模式简而言之就是对现有类进行一个包装，不通过子类或者改变其内部结构的方式为其扩展功能。
通俗的说，就是将现有的类变得更加“华丽”，比如礼物可以直接送，但是加上礼品盒更美观，手机可以直接用，但是加上钢化膜更耐摔。以“吃鸡”游戏为例，98k本身就具有狙击功能。安装狙消音可以枪具有消音功能，8倍镜可以扩大视野范围，枪托可以增加强的稳定性，这些都没有改变原有的98k可以狙击的功能，只是让它的属性变得更强。
装饰器的行为可以理解为如下：
@decorator
class A{ }
// 等同于
class A = { }
A = decorator(A) || A;
装饰器的本质就是一个函数，它具有三个参数target、key、descriptor。target是装饰的对象，key是装饰对象的具体属性，也就是修饰器紧跟其后的属性名字。descriptor是该属性的描述对象，自带configurable、value、enumerable、writable、__proto__属性。
装饰类
function decorator(target) {
target.age = 20; // 为类添加静态属性
target.prototype.grade = 3; // 为类添加实例属性
}
@decorator
class Student{ }
const student = new Student();
console.log(student.age); //20
console.log(student.grade) //3
上述方法中，本身Student类没有任何属性，因为注入装饰器之后，Student拥有了静态属性age和实例属性grade。装饰器除了可以装饰类，还可以装饰类的方法。
装饰类的方法
class Math {
@log
add(a, b) { return a + b; }
}
function log(target, name, descriptor) {
var oldValue = descriptor.value;
descriptor.value = function() {
console.log(`Calling ${name} with`, arguments);
return oldValue.apply(this, arguments);
};
return descriptor;
}
const math = new Math();
add(2, 4);
//calling add with [2，4]
@log是一个打印装饰器，装饰了Math类的add函数，通过修改属性描述对象的值descriptor.value实现打印功能。装饰后，每次调用add函数都会打印调用时的相关日志。
注意：如果同一个方法有多个修饰器，会像剥洋葱一样，先从外到内进入，然后由内向外执行。
装饰器在react中的应用
@connnet装饰器
react-redux的常规使用，一般需要先定义UI组件后，再使用connect函数将UI组件变为容器组件导出
class UIComponent extends React.Component { }
const ContainerComponent = connect( mapStateToProps , mapDispatchToProps )( UIComponent );
export default ContainerComponent;
使用装饰器后，无需再定义容器组件
@connect( mapStateToProps , mapDispatchToProps )
class UIComponent extends React.Component { }
export default UIComponent;
定制高阶组件
有时业务中需要定义自己的高阶组件，实现代码的复用。比如在业务开发中，每个页面的预加载功能可以作为一个装饰器。
