当前位置：首页 > news >正文

react中的装饰器

news 来源：原创 2024/9/20 9:32:01

一、初见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 {@methodDecoratormyMethod(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 {@propertyDecoratormyProperty = '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@secondDecoratormyMethod() {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社区中的一个模式，允许我们复用组件逻辑。简单来说，高阶组件就是一个函数，它接受一个组件并返回一个新的组件。