why MobX？
React是一个view层的解决方案，当我们只用它来展示一些静态数据时，无需引入任何一种状态管理库。
当多个有状态组件进行复杂的交互时，如果不引入状态管理插件，只用state来实现，组件间的状态交互将使代码异常复杂，业务数据和UI交互耦合，难以阅读。
业界比较流行的状态管理库是redux，但是redux难以上手，学习难度较高，不适合前端玩票选手。
相比之下，MobX是一个异常简单且可扩展性高的状态管理库，上手简单，功能强大，适合中小型系统。
准备工作
npm install mobx --save
npm install mobx-react --save
tsconfig.json中增加"experimentalDecorators": true
第一个demo
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { observer } from 'mobx-react';
import { observable, useStrict, action, runInAction, computed } from 'mobx';
// 启用mobx严格模式，严格模式下不允许直接修改@observable修饰的数据，需@action修饰的方法来修改。原则上必须用严格模式。
useStrict(true);
class Store {
@observable title:string = '请点击我！';
@action changeTitle() {
this.title = '已经点击了！';
}
}
const store = new Store();
@observer
class TitlePanel extends React.Component<{},{}> {
render() {
return(<h1 onClick={() => store.changeTitle()}>{store.title}</h1>);
}
}
ReactDom.render(<TitlePanel /> ,document.body);
这里用了三个陌生的注解，@observable修饰的数据和@observer修饰的组件绑定，当数据发生变化时，组件对应变化。@action修饰的方法用来改变数据。非常简单易懂。
如果不用mobx，这个demo是这样的：
class TitlePanels extends React.Component<{}, {}> {
public state = { title: '请点击我' };
constructor() {
super();
this.onChange = this.onChange.bind(this);
}
onChange() {
this.setState({ title: '已经点击了！' });
}
render() {
return (<h1 onClick={this.onChange}>{this.state.title}</h1>);
}
}
看起来好像没什么区别，不使用mobx代码量还少一点。所以当只维护一个有状态组件时，无需使用mobx。
但是当多个子父组件联动时，使用了mobx，只需在store中维护一份数据，即可控制多个组件的状态，大大简化组件间交互的逻辑，这也是mobx的价值所在。
runInAction
@action 只能影响正在运行的函数，而无法影响当前函数调用的异步操作。
所以当@action中有异步请求时，需要用runInAction()包裹。调用后，这个action方法会立刻执行。不用runInAction()，异步方法运行时会报错。
还是第一个demo，当要改变的数据是从后台请求到时：
@action changeTitle() {
post('post/getTitle', res => {
runInAction(() => {
//res.title='已经点击了！'
this.title = res.title;
});
});
}
computed——计算属性
直接上demo：
useStrict(true);
class Store {
@observable goods: any = { price: 20, number: 100 };
@computed get total() {
return this.goods.price * this.goods.number;
}
@action changePrice() {
this.goods.price = Math.floor(Math.random() * 100);
}
}
const store = new Store();
@observer
class TitlePanel extends React.Component<{}, {}> {
render() {
return (<div>
<h1>{`单价：${store.goods.price},数量：${store.goods.number},总价${store.total}`}</h1>
<button onClick={() => { store.changePrice() }}>{'点击改变单价'}</button>
</div>);
}
}
ReactDom.render(<TitlePanel />, document.body);
@computed 修饰的方法一般用来做计算/单位转换/格式转换等工作。我们当然可以用@aciton或者直接在render()中计算。
@computed的优点是可以缓存计算后的值，提升效率。像demo里这种每次都是不同值，用@computed没有优势。
@observable修饰数组
@observable可以修饰任何js类型，包括string、number、object、array。
修饰array时会有一些需要注意的地方，请看demo。
