mobx入门

React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

0. 安装

安装: npm install mobx --save
React 绑定库: npm install mobx-react --save

1. 概念图

解读：
getInitialState() —— return的数据存放在this.props里，可以在render中直接取，但是如果是“加载更多”等数据，需要存到mobx的store里，不然无法对this.props进行操作；
@observable —— 作用是让其后的变量挂载到this.props里；
@action —— 在index.js的getInitialState()等函数中调用，用于把数据传入store并进行操作；
对于render来说从getInitialState()和store中都是从this.props里取数据，没有差别。

2. 例子

const { observable, action, computed, autorun } = mobx;

class Store {
	@observable count = 0;
	@observable list = [];
	@action add() {
		this.count = this.count + 1;
	}
	@computed get total() {
    return this.list.length;
  }
}

const mstore = new Store();
setInterval(() => {
	mstore.add();
}, 500)

autorun(() => {
	console.log(mstore.count);
});

参考官网地址：mobx