并上一节使用的是普通的数据状态管理，不过官方推荐使用装饰器模式，而在默认的react项目中是不支持装饰器的，需要手动启用。
一、添加配置
官方提供了四种方法,
方法一、使用TypeScript，顾名思义该方法是项目使用typescript时的配置
方法二、使用babel-preset-mobx, 安装并添加到.babelrc配置中，该方法需要升级一些依赖，
babel-core -> @/babel-core 7.x
babel-loader -> @/babel-loader 8.x
babel-preset-env -> @/babel-preset-env
babel-preset-react -> @babel-preset-react
同时需要修改.babelrc配置，相当麻烦
方法三、使用babel-plugin-transform-decorators-legacy, 安装并添加到.babelrc即可, 但需要注意的是必须将其放在其他插件之前。
方法四、在create-react-app中使用，需要eject或者使用react-app-rewired-mobx
1. 使用eject时 ($ npm run eject)，是将项目的配置文件全部暴露出来,注意该操作不可逆，然后再使用方法二或者方法三进行配置
2. 使用react-app-rewired-mobx是为了避免eject项目, 安装模块后在项目根目录新建文件config-overrides.js
const rewireMobX = require('react-app-rewire-mobx');
/* config-overrides.js */
module.exports = function override(config, env) {
config = rewireMobX(config, env);
return config;
}
综合以上方法，显而易见方法三最简单而且不易出错。
二、修改业务代码
1. 根组件不变
import React from 'react';
import appState from './store';
import Todo from "./components/Todo"; export default class App extends React.Component {
render() {
return (
<div className='app'>
<Todo appState={appState}/>
</div>
)
}
}
2 . 修改store
import {observable, action } from 'mobx'
// 常量改成类
class AppState {
// 装饰器@
@observable timer = 0
@action
resetTimer() {
this.timer = 0;
}
@action.bound
increase() {
console.log('increase')
this.timer++;
}
}
// 将类实例化，后再暴露, 也可以先导出再在组件使用时再实例化
const appState = new AppState()
// 外部调用类的方法
setInterval(appState.increase, 1000)
export default appState;
3 . 修改子组件,(将observer改成@observer放在类的前面即可)
import React, {Component} from 'react';
import { observer } from 'mobx-react';
// 装饰器方式@
@observer
class TodoList extends Component {
constructor(props) {
super(props);
}
// 该绑定方式属于ES7，需要添加预设babel-preset-stage-2
_resetTimer = ()=> {
this.props.appState.resetTimer()
}
_increase = () => {
this.props.appState.increase()
}
render() {
return (
<div>
<h2>TodoList</h2>
<p>{this.props.appState.timer}</p>
<button onClick={this._resetTimer}>复位</button>
<button onClick={this._increase}>增加</button>
</div>
);
}
}
// 直接导出类组件
export default TodoList;
修改完毕，项目正常运行。