一、初见react装饰器
初初接触react，发现一些神秘符号和语法，觉得很神奇。类似这样：
import React, { PureComponent, Fragment } from 'react';
import {Form} from 'antd';
@Form.create()
class UpdateForm extends PureComponent {
。。。
}哇塞！Spring Boot在react身上附体了！不明觉厉！顶礼膜拜！嘤嘤嘤
其实，这个@Form.create()就是一个装饰器。
二、什么是react的装饰器
在 React 中，装饰器（Decorators）是一种语法糖，用于简化和增强组件的功能。它的主要作用是通过在组件类或类成员（如方法、属性）上添加修饰符，来扩展或修改组件的行为。
装饰器通常以 @ 符号开头，紧接着是装饰器函数的名称，并且可以附带参数。它通常用于类和类的方法之上，例如：
@decorator
class MyComponent extends React.Component {
// ...
}
@decoratorMethod
myMethod() {
// ...
}装饰器本质上是一个高阶函数，它接收一个目标（类或类成员）并返回一个新的目标（通常是经过修改后的类或类成员）。装饰器通过操作传入的目标来实现增强或修改其功能。在 JavaScript 中，装饰器的语法和行为仍然是提案阶段（stage 2），因此需要使用 Babel 等工具进行编译。
这是AI的解释。从给出的例子看，装饰器应用的就是装饰模式，用以增强目标对象的功能。所谓装饰模式，最显著的特点，就是不改变原有对象的功能，而是增强和增加其功能，就好比往其身上刷一层又一层的漆。高阶函数的解释见附录。
在目录一的例子中，@Form.create() 是一个工厂函数，它返回一个装饰器函数。
三、类装饰器
类装饰器是应用于整个类的函数，它接收类的构造函数作为参数，并返回一个新的构造函数或直接修改类本身。
示例：类装饰器
function classDecorator(target) {
// 修改类的原型或添加静态方法
target.prototype.newMethod = function() {
console.log('New method added by decorator');
};
return target; // 也可以返回一个新的构造函数
}
@classDecorator
class MyClass {
existingMethod() {
console.log('Existing method');
}
}
const instance = new MyClass();
instance.existingMethod(); // Existing method
instance.newMethod(); // New method added by decorator在这个例子中，classDecorator 接收 MyClass 作为参数，并在其原型上添加一个新方法 newMethod。
四、方法装饰器
方法装饰器用于修改类的方法。它接收三个参数：目标对象、方法名和方法描述符。
示例：方法装饰器
function methodDecorator(target, key, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
console.log(`Calling ${key} with`, args);
return originalMethod.apply(this, args);
};
return descriptor;
}
class MyClass {
@methodDecorator
myMethod(param) {
console.log('Executing myMethod', param);
}
}
const instance = new MyClass();
instance.myMethod('test'); // Calling myMethod with ['test'] \n Executing myMethod test在这个例子中，methodDecorator 拦截了 myMethod 的调用，添加了一些日志，然后调用了原始方法。
五、属性装饰器
属性装饰器用于修改类的属性。它接收两个参数：目标对象和属性名。
示例：属性装饰器
function propertyDecorator(target, key) {
let value = target[key];
const getter = () => {
console.log(`Getting value of ${key}`);
return value;
};
const setter = newValue => {
console.log(`Setting value of ${key} to ${newValue}`);
value = newValue;
};
Object.defineProperty(target, key, {
get: getter,
set: setter,
enumerable: true,
configurable: true,
});
}
class MyClass {
@propertyDecorator
myProperty = 'initial value';
}
const instance = new MyClass();
console.log(instance.myProperty); // Getting value of myProperty \n initial value
instance.myProperty = 'new value'; // Setting value of myProperty to new value
console.log(instance.myProperty); // Getting value of myProperty \n new value在这个例子中，propertyDecorator 为 myProperty 添加了自定义的 getter 和 setter，以便在访问和修改属性值时打印日志。
六、组合装饰器
装饰器可以组合使用，对同一个目标应用多个装饰器时，它们按照从下到上的顺序依次执行。
示例：组合装饰器
function firstDecorator(target, key, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
console.log('First decorator');
return originalMethod.apply(this, args);
};
return descriptor;
}
function secondDecorator(target, key, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
console.log('Second decorator');
return originalMethod.apply(this, args);
};
return descriptor;
}
class MyClass {
@firstDecorator
@secondDecorator
myMethod() {
console.log('Executing myMethod');
}
}
const instance = new MyClass();
instance.myMethod(); // Second decorator \n First decorator \n Executing myMethod在这个例子中，secondDecorator 先执行，然后 firstDecorator 执行，最后调用原始方法 myMethod。
七、总结
装饰器通过函数操作传入的目标来修改类或类成员。它们可以用于增强或修改类、方法和属性的行为，具有很强的灵活性和复用性。尽管装饰器仍处于提案阶段，但在使用 Babel 等工具时已经可以方便地在项目中应用。
附录，什么是高阶函数
在计算机科学和函数式编程中，高阶函数（Higher-Order Function）是一种可以接受一个或多个函数作为输入参数，并且/或者返回一个函数作为结果的函数。这种特性使得高阶函数非常灵活和强大，因为它们可以操作其他函数，就像操作普通数据类型一样。
高阶函数（Higher-order Function）是至少满足下列一个条件的函数：
函数作为参数：高阶函数可以接受一个或多个函数作为参数。
返回一个函数：高阶函数可以返回一个函数作为结果。
换句话说，高阶函数不仅可以处理数据，还可以处理函数本身。高阶函数是函数式编程中的一个重要概念。在React中，高阶函数通常用来创建高阶组件（Higher-Order Components, HOCs）。高阶组件是React社区中的一个模式，允许我们复用组件逻辑。简单来说，高阶组件就是一个函数，它接受一个组件并返回一个新的组件。
1、高阶组件的特点：
1）接受一个组件作为参数：
一个高阶组件接受一个React组件作为参数。
2）返回一个新组件：
它返回一个新的React组件，这个新组件通常会增强原始组件的功能或添加额外的行为。
3）不修改传入的组件：
高阶组件不会修改原始组件，而是通过返回新的组件来扩展功能。
2、使用高阶组件的好处：
1）复用组件间的逻辑：可以将公共逻辑抽象成高阶组件，然后在多个组件之间共享这些逻辑。
2）解耦组件逻辑：高阶组件可以帮助你将业务逻辑与组件渲染逻辑分离。
3）易于测试：高阶组件可以独立于实际的组件进行测试，这使得测试变得更加容易。
