本文作者：IMWeb 结一 原文出处：IMWeb社区 未经同意，禁止转载
概述
Mobx 是一个简单、可扩展的状态管理工具。相比 redux，mobx可以使用更自由，更少的代码来管理状态。
核心概念
MobX 主要包括了四个核心概念：可观察的状态、根据状态得到的计算值、基于状态变化发生的反应，触发状态变化的动作。
下面我们以股票为例，简单说明下这四个核心概念。
假设你有1000股腾讯的股票，现在的价格为400元每股。
- 股价是随时可变的，而数量你也可以买进卖出来改变，所以这两个数据是可变的，也即是可观察的状态；
- 总价值 = 股数 * 每股的价值。那么即是根据状态得到的计算值；
- 每次股价变动，会导致页面上的股价的曲线图发生改变，也会导致页面上显示的总价值发生改变。那么页面上曲线图及总价值的UI就是基于状态发生的反应；
- 你会根据股价的变动，来决定买入还是卖出，这会导致你拥有的股数发生变化。那么买入卖出即是触发状态变化的动作。
可观察的状态（Observable state）
MobX 通过使用 @observable 为现有的数据结构(如对象，数组和类实例)添加了可观察的功能，这样当数据发生变化的时候就可以继续进行下一步发应。 如下设置股票的价格和数量可观察：
class Stock {
@observable price = 400;
@observable num = 1000;
}根据状态得到的计算值（Computed values）
Mobx 可通过 @computed 装饰器来定义某些状态发生变化时自动更新的值。如下设置股票总价值为计算值：
class Stock {
@observable price = 400;
@observable num = 1000;
@computed get totalVal() {
return this.price * this.num;
}
}基于状态变化发生的反应（Reactions）
Mobx 可使用 autorun 函数来创建一些自定义的反应，如下当股价变化时，打印股价：
// 改变股价为420
const stock700 = new Stock();
stock700.price = 420;
autorun(() => {
console.log("股价发生变化: " stock700.price );
// 或者去干点啥
doSomething(stock700.price);
})
function doSomething (price) {
// 做点什么，更新 UI 什么的
}触发状态变化的动作（Action）
在非严格模式下，mobx的状态可以在任何地方进行修改，如上面我们改变股价就是直接修改。但是在严格模式下，状态只能通过 action 来进行修改，如下我们增加买入卖出股票：
class Stock {
@observable price = 400;
@observable num = 1000;
@computed get totalVal() {
return this.price * this.num;
}
@action
buyIn = (num) => {
this.num = num;
}
@action
sayOut = (num) => {
this.num -= num;
}
}结合 React
如 redux 有 react-redux 一样，mobx 也有一个 mobx-react，可与 react 结合。mobx-react 提供一个 @observer 装饰器， 当你的状态发生变化时，会自动（autorun）调用组件的 render 方法，更新 UI，这样就可以把你的(无状态函数)组件变成响应式组件。
以 todo 为例，使用 react & mobx 可参考： mobx react todo
最后奉上其经典的架构设计图，如下：
参考资料
- mobx 中文文档
- mobx 视频教程
- Redux vs MobX: 哪一个最合适你的项目? — SitePoint
