关于装饰器的解析与使用

在react中使用装饰器和Mobx如何去配置

1.首先构建脚手架项目,（其他文件可删除只留如下目录文件）

create-react-app MobxApp

2.然后安装mobx, mobx-react

yarn add mobx mobx-react

3.## 重点来了（关于装饰器的配置）
经常遇到的装饰器@符号不被识别，怎么解决呢？
3.1 首先安装
customize-cra
react-app-rewired
@babel/plugin-proposal-decorators

yarn add customize-cra react-app-rewired @babel/plugin-proposal-decorators --dev

3.2然后在package.json中添加配置

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "transform-decorators-legacy"
      ]
    ]
  }

再更改package.json中的"scripts"部分

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

3.3然后在项目根目录新建config-overrides.js文件，再添加以下配置

const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
    addDecoratorsLegacy()
)

4.这个时候我们便可以开始使用我们的mobx和装饰器了
4.1在index.js里可以是初始化状态

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

4.2在App.js里我们使用mobx和装饰器

import React, { Component } from 'react';
import { observer } from 'mobx-react'
import { observable } from 'mobx'
@observer
class App extends Component {
  @observable count = 1
  render() {
    return (
      <div className="App" >
        {this.count}
      </div>
    );
  }
}

export default App;

5.最后，我们的项目便可以跑起来了,yarn start正常运行项目

yarn start