create-react-app MobX

一、安装

注：react及其他使用create-react-app（据说业界最优秀）
注：create-react-app 已经使用npm全局安装

• 创建react应用，执行成功后进入项目目录

create-react-app mobx-demo
cd mobx-demo

注：或webstorm 直接打开

react应用目录

• 检验是否成功，出现react 的icon说明成功

npm start

react 访问

• 安装mobx以及React 绑定库

npm install mobx --save
npm install mobx-react --save

package.json

二、简单使用

注：应用变成响应式，按照文档中的三步走战略，状态管理最简单的例子基本都是定时器定时更新，详细的可以看官网文档（想直接看到效果的可以忽略下面三步走战略，文章最后有实现源码）
Mobx 链接
（一）定义状态并使其可观察

import {observable} from 'mobx';
var appState = observable({
   timer:0
});

（二）创建视图以响应状态的变化

import {observer} from 'mobx-react';

@observer
class TimerView extends React.Component {
    render() {
        return (<button onClick={this.onReset.bind(this)}>
                Seconds passed: {this.props.appState.timer}
            </button>);
    }

    onReset () {
        this.props.appState.resetTimer();
    }
};

ReactDOM.render(<TimerView appState={appState} />, document.body);

（三）更改状态

appState.resetTimer = action(function reset() {
    appState.timer = 0;
});

setInterval(action(function tick() {
    appState.timer += 1;
}), 1000);

执行npm start，报错。
注意@observe，create-react-app是没有内置的装饰器支持，详见
如何(不)使用装饰器
解决办法：
刚开始想直接使用eject命令，但一直报错Remove untracked files, stash or commit any changes, and try again.，最后在Stack Overflow上找到两种解决方案，但是都未解决，所以最终选择react-app-rewired的方式
GitHub：
react-app-rewired
react-app-rewire-mobx

• 下载安装所需包

npm install react-app-rewired --save-dev
npm install react-app-rewire-mobx --save

• 修改package.json

{
  "name": "mobx-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "mobx": "^5.0.3",
    "mobx-react": "^5.2.3",
    "react": "^16.4.1",
    "react-app-rewire-mobx": "^1.0.8",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-app-rewired": "^1.5.2"
  }
}

• 在项目根目录下新建config-overrides.js
  工程目录

config-overrides.js file

const rewireMobX = require('react-app-rewire-mobx');

module.exports = function override(config, env) {

    // use the MobX rewire
    config = rewireMobX(config, env);

    return config;
}

• 运行npm start
  运行结果

随着时间按秒递增，点击会重置

三、源码

为了方便，直接在App.js文件中修改了下，实际中应该在

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import {observable} from 'mobx';
import {observer} from 'mobx-react';

//1.定义状态
var appState = observable({
    timer: 0
});

//2.创建视图
@observer
class TimerView extends React.Component {
    render() {
        return (<button onClick={this.onReset.bind(this)}>
            Seconds passed: {this.props.appState.timer}
        </button>);
    }

    onReset () {
        this.props.appState.resetTimer();
    }
};

//3.更改状态
appState.resetTimer = () => {
    appState.timer = 0;
};

setInterval(()=>{
    appState.timer += 1;
}, 1000);

class App extends Component {
  render() {
    return (
      <div className="App">
          <TimerView appState={appState} />
      </div>
    );
  }
}

export default App;