目 录CONTENT

文章目录

ES7装饰器使用

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 6746 阅读 / 3773 字

ES7装饰器使用

装饰器是ES2016 stage-2的一个草案,但是在babel的支持下,已被广泛使用。关于ES规范可参考Github:tc39/proposals

类的修饰

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

注意,修饰器对类的行为的改变,是代码编译时发生的,而不是在运行时。这意味着,修饰器能在编译阶段运行代码。也就是说,修饰器本质就是编译时执行的函数。

前面的例子是为类添加一个静态属性,如果想添加实例属性,可以通过目标类的prototype对象操作。

function testable(target) {
  target.prototype.isTestable = true;
}

@testable
class MyTestableClass {}

let obj = new MyTestableClass();
obj.isTestable // true

方法的修饰

多了两个参数(类的没有)

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
  descriptor.writable = false;
  return descriptor;
}

又例如一个日志的修饰器

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

function log(target, name, descriptor) {
  var oldValue = descriptor.value;

  descriptor.value = function(...list) {
    console.log(list);
    console.log(`Calling ${name} with`, ...list);
    return oldValue.call(this, ...list);
  };

  return descriptor;
}

const math = new Math();

// passed parameters should get logged now
let result = math.add(2, 4);

console.log(result)

create-react-app中使用装饰器

$ create-react-app ExampleApp

$ npm run eject

$ npm install babel-preset-stage-2 --save-dev
$ npm install babel-preset-react-native-stage-0 --save-dev

根目录下创建.babelrc 并添加
{ "presets": ["react-native-stage-0/decorator-support"] }

最后再执行一下 npm install命令,跑起来npm start即可

以上方法呢,是网上的方式,但是我试了n遍没法执行嗷嗷嗷。。

后来我又查了很多方法最终找到了一个真正能让react中使用装饰器的方法。

img

方法呢,是先

$ npm install --save-dev @babel/plugin-proposal-decorators

安装babel。

然后在

node_modules/react-scripts/config/webpack.config.js

的rule中找到了js文件里:babel-preset-react-app

随即找到

node_modules/babel-preset-react-app/create.js

的plugins 中添加

[ require('@babel/plugin-proposal-decorators'), { "legacy": true, } ]

注意,在其中有个Typescript的选项,把typescript那行删去,然后就可以用了。


当然也可以不修改node_modules里在文件,转而在外边单独的写配置文件的方式来进行

  1. 安装@babel/plugin-proposal-decorators

    $ yarn add @babel/plugin-proposal-decorators --dev
    
  2. 再使用yarn命令安装react-app-rewired,需要等待一会儿

    $ yarn add react-app-rewired --dev;
    
  3. 返回到项目的根目录,新建一个文件.babelrc,并添加如下代码

    1582964982709

  4. 同样的,再在这个目录新建一个文件config-overrides.js,然后这些代码

    1582965002885

到此为止,我们就可以在react项目当中正常的使用装饰器了

0

评论区