共计 936 个字符，预计需要花费 3 分钟才能阅读完成。
前言
当项目越发复杂时，我们发现仅仅是提升状态已经无法适应如此复杂的状态管理了，程序状态变得比较难同步，操作，到处是回调，发布，订阅，这意味着我们需要更好的状态管理方式，于是就引入了状态管理库，如 Redux，Mobx，Jumpsuit，Alt.js 等。
Mobx 是什么
对于我来说 Mobx 几乎和 Vue 一样，通过监听数据的属性变化，可以通过直接在数据上更改就能触发 UI 的渲染，从而做到 MVVM、响应式、上手快，Api 简单等等。
安装 npm install mobx –save
原则
mobx 支持单向数据流也就是动作改变状态，而状态的改变会更新所有受影响的视图。如下图
一个简单的 react+mobx 的计算实例
npm install mobx-react –save // 下载 mobx
import {observable, action} c // 应用 mobx
const counter = {
state: observable({
count: 0
}),
add: action(function() {
this.state.count ++
})
}
export default counter
// 这时候 counter 的结构是这样的
{
state: {count: 0}
add: function
}
// 现在我们将 mobx 和 react 联系起来；
import {observer} from ‘mobx-react’
import counter from ‘./counter’
const CouterView = () => {
return (
<div>
<span>{counter.state.count}</span> // 这里的 count 时计数器里的数据
<button onClick={() => counter.add()} > + </button> // 点击按钮会把数字加 1
</div>
)
}
export default observer(CouterView);
// 这样就实现了一个简单的 mobx 的数据管理库
小结
在 mobx 中没有 reducer 这一层，所以不需要为了 action 和 reducer 之间的通信而使代码高度抽象。
mobx 里 state 的更新是很直观的，通过赋值行为即可，而不需要 dispatch 或者 setState 这样的方法。
写的不详细，如有需要者，请前往官方文档