What is MobX
官方把MobX介绍为“简单，可扩展的状态管理”。
MobX是一个状态管理工具，用来存储和更新状态。
React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。
MobX 的灵感来自excel表格中的反应式编程原理。
Why use MobX
MobX通常是搭配React使用，由React提供优化UI渲染的机制，MobX则负责协助React管理应用状态，在需要时更新并且始终保持最新的。
React自身管理状态是通过state和setState来进行处理的。但是state如果没有用好的话会带来一些麻烦，state的每一次改变都会使组件进行重新的渲染，如果改变过于频繁则会带来性能上的降低。并且，当应用变得负责，组件层级变得更深，状态的管理也会越来越复杂。因此，我们更倾向于使用React+MobX的形式，哪个组件需要哪个状态就单独绑定该状态，数据改变组件就重新渲染。这样，成本更低，形式也更简洁。
How to use MobX
学习MobX，主要是理解Observable（观察状态）, reaction（反应，主要是对状态的响应）, action(动作，主要是对状态的改变), computed（衍生，主要是对状态的响应）四个基础概念，基本上MobX的机制都建立在这几个概念之上，理解了概念学习起来会更顺利，也能够更好地运用在实践中。
Observable
需要被观察的对象就加上@Observable beObservedObj
Reactions
反应，state状态发生变化引起的副作用，例如打印日志、更新React DOM树。每当观察的对象的引用发生了变化，它就会重新执行。
使用reaction, autorun, when可以创建自定义reactions。
Computed
设想这样一个场景：对于Table组件的column属性，Table的每一列数据，都是数据库存储的某个列表的各个数据的映射。从数据库获取这个列表，将其作为一个Observable对象被观察。每当列表的值发生了变化，column中的数据也会随之发生变化，所以说column里的数据都是列表数据属性衍生出来的值，这个场景就要对column这个属性用@computed
Action
动作是用来修改状态的东西
比如用于分页的Pagination组件，会使用到index, size属性，这些属性都是被观察的状态。
用户这时想要更改一页显示的数据，从10条改为20条。代码的逻辑是修改size变成20，就在onChange方法里修改this.size = 20。onChange方法对被观察的状态进行了修改，这就是一次Action，onChange方法前就应该加上@action