在create-react-app中使用装饰器decorators

前言 

       装饰器是ES6提出来的草案，装饰器又可叫修饰器（decorator）是一个函数，用来添加或修改类、属性、方法等的行为。 decorator 是在 ES7 中定案的新语法，它可以对一些对象进行装饰包装然后返回一个被包装过的对象，使用起来非常方便。 但是，就目前为止，由于兼容问题，如果要在react项目中使用装饰器，需要配置一下运行环境，安装第三方插件来中转才行。

 create-react-app装饰器 运行环境配置步骤

在使用之前需要先下载babel插件

yarn add @babel/core @babel/plugin-proposal-decorators @babel/preset-env

创建.babelrc

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

创建或修改config-overrides.js

const path = require('path')
const { override,addDecoratorsLegacy} = require('customize-cra');
function resolve(dir) {
    return path.join(__dirname,dir)
}
const customize = () =>(config,env) =>{
    config.resolve.alias['@'] = resolve('src')
    if(env === 'production'){
        config.externals = {
            'react':'React',
            'react-dom': 'ReactDOM'
        }
    } 
   return config
}

module.exports = override(addDecoratorsLegacy(),customize())

安装依赖

yarn add customize-cra react-app-rewired 

修改package.json文件

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

在react组价使用

可以给装饰器单独分一个文件夹 decorators.js

// 修饰器是一个对类进行处理的函数。修饰器函数的第一个参数，就是所要修饰的目标类。
 
function test(target){
    console.log(target)  // 输出的是一个类 要注意类的方法类的实例不能使用 所以如果是要
                         // 给类的实例使用 要挂载原型上
    target.prototype.getDate = ()=>{
        console.log( new Date() )
    }
}

在react组件中引用

import {test} from '@utils/decorator'
 
@test  // 不能加分号
 
class MianComponent extends Component {
    componentDidMount(){
        console.log(this,'decorator.js') // 这里的this是类的一个实例
        this.test()                      // 调用
    }
}
 
export default MainComponent

可以看到打印出来是在原型上 原型上的方法可以被实例调用

class A {
    test(){  // 写在这里的方法在原型上 只能被实例（new A()）调用
        alert(1)
    }
}
 
A.test2 = ()=>{   // 写在这里在constructor上 只能被类（A）调用
    alert(22)
}
console.log(new A())