ES7装饰器使用-杨标的博客

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中使用装饰器的方法。

方法呢，是先

$ 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里在文件，转而在外边单独的写配置文件的方式来进行

安装@babel/plugin-proposal-decorators

$ yarn add @babel/plugin-proposal-decorators --dev

再使用yarn命令安装react-app-rewired，需要等待一会儿
```
$ yarn add react-app-rewired --dev;
```
返回到项目的根目录，新建一个文件.babelrc，并添加如下代码
同样的，再在这个目录新建一个文件config-overrides.js，然后这些代码

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

目录CONTENT

ES7装饰器使用