Mobx+React

create-react-app + mobx-react

“mobx”: “^3.3.2”,
“mobx-react”: “^4.3.5”,
“react”: “^16.1.1”,
“react-router-dom”: “^4.2.2”

安装babel-plugin-transform-decorators-legacy后支持ES6版本的装饰器写法

npm i --save-dev babel-plugin-transform-decorators-legacy

配置.babelrc

{
  "presets": [
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy"]
}

装饰器写法

const Timer = observer(class Timer extends React.Component {
    /* ... */
})

/*注入 stores 的方法*/
const TodoView = inject("store")(observer(class App extends Component {
})

const Timer = observer(({ timer }) =>
    <div>{ timer.elapsedTime }</div>
)

支持ES.next 版本的装饰器代码写法

第一种：使用custom-react-scripts代替react-scripts来使用create-react-app创建react代码

create-react-app my-app --scripts-version custom-react-scripts
或
删除react-scripts安装custom-react-scripts

配置.dev文件，参考custom-react-scripts

第二种：使用普通方法创建后，使用eject方法

$ npm run eject //转为支持未来模式，不能回退，慎用

安装依赖包
$ yarn

装饰器写法

@observer
class Timer extends React.Component {
    /* ... */
}

/* 使用 Provider 传递 stores */
<Provider store={appStore}><App /></Provider>

/*注入 stores 的方法*/
@inject("store")
@observer
class App extends React.Component {}

引入方法

import {Provider} from 'mobx-react';
import {observer, inject} from 'mobx-react';
import {observable, action, autorun, computed} from 'mobx';

 

参考网址：Mobx

gitHub案例：react-mobx