react中使用装饰器（decorators）

本文主要用于在create-react-app上使用装饰器，所以首先就需要通过create-react-app来创建项目。

安装

因为是脚手架所创建的项目，所以在需要自定义一些 create-react-app上的配置信息时就需要用到react-app-rewired

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。

yarn add react-app-rewired customize-cra -D

修改package.json

修改package.json文件对应内容

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

创建 config-overrides.js 配置文件

我们可以在该文件中自定义配置信息，这里将下面信息写入

const {override,addBabelPlugin} = require('customize-cra');
const path = require('path')

module.exports = override(
  addBabelPlugin( [
    //引入装饰器Decorator
    "@babel/plugin-proposal-decorators", { "legacy": true }
  ])
)

装饰器的使用和报错处理

该部分引自：最美丽的丽丽=》丽丽博客跳转

装饰器是一种函数，写成@ + 函数名。它可以放在类和类方法的定义前面。

例如：@fn class Box{}

• fn 为函数名，也就是装饰器，在该函数中可以修改类的行为，比如给类添加静态属性或者实例属性；
• Box 是定义的一个类；
• fn 中的参数是后面的类本身；
• 装饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，装饰器能在编译阶段运行代码。也就是说，装饰器本质就是编译时执行的函数；
  *装饰器只能用于类和类的方法，不能用于函数，因为存在函数提升。

使用

这里我们通过redux的connect来举例，我们原本的写法是这样的：

import React, { Component } from 'react'
import connect from './connect.js'

class Button extends Component {
    handleClick=()=>{
        this.props.loadData()
    }

    render() {
        return (
            <div>
                <p>{this.props.message}</p>
                <button onClick={this.handleClick}>get data</button>
            </div>
        )
    }
}

export default  connect(Button)
/返回一个connect包裹的类

使用装饰器的写法：

import React, { Component } from 'react'
import connect from './connect.js'

@connect
class Button extends Component {
    handleClick=()=>{
        this.props.loadData()
    }

    render() {
        return (
            <div>
                <p>{this.props.message}</p>
                <button onClick={this.handleClick}>get data</button>
            </div>
        )
    }
}

export default Button
//直接将被connect包裹的类导出

这样写的好处就是因为react是会有很多这种操作，例如高阶组件等这种包裹用法的，个人认为通过装饰器的写法可以很方便的嵌套起来。

错误处理

这里的并不支持装饰器的写法，因为装饰器是是ES6的新特性，是一种与类（class）相关的语法，这里我们需要手动处理一下错误

在打开窗口中搜索experimentalDecorators显示下方信息，将复选框勾选即可。