react中使用装饰器

装饰器 decorator 是一种函数,是 Es6 的一个语法糖,是一种与类(class)相关的语法,用来注释或修改类和方法

以@+函数名形式展现,可以放在类和类方法的定义前面

为什么要使用装饰器模式?

在设计模式中讲到优先使用对象而不是类继承,动态的给对象添加一些额外的属性或方法，相比与使用继承,装饰器模式更加灵活

在 React 中,高阶组件是一个非常厉害的东西,它最大的特点就是能够:重用组件逻辑.达到精简代码能力

使用create-react-app创建项目后，它默认是不支持装饰器模式的,需要对项目做一些配置

在项目根目录中终端下使用npm run eject,这条命令主要是将我们的配置项做一个反向输出,暴露出隐藏的 webpack 配置项,这样可以项目进行修改了的,注意它是不可逆的

方式 - 经过 eject 后在 package.json 中的 plugins 中配置

使用装饰器,需要使用babel来进行转换,用到的插件是@babel/plugin-proposal-decorators

当用eject将webpack一些配置弹射出来以后,会看到根目录下的package.json文件下新增了很多文件

在babel对象处进行插件的配置,将@babel/plugin-proposal-decorators添加到plugins后

{
  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            { "legacy": true }
        ]
    ]
  }
}

注意：

1, babel --> 7.x 与 6.x是不一样的；可以参考 https://www.cnblogs.com/superlizhao/p/10393237.html

2，create-react-app 脚手架中已经安装了 @babel/plugin-proposal-decorators 插件

3. 如果使用的是 vscode, 可以在项目根目录下添加 jsconfig.json 文件来消除代码警告

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}