学习Mobx的第一天｛概念，原则，要点｝

Mobx背后的哲学：

    任何源自应用状态的东西都应该自动地获得。其中包括UI、数据序列化、服务器通讯等等。

         reac和Mobx是一对强力组合。React通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。

mobx提供机制来存储和更新应用状态供react使用。react提供了优化UI渲染的机制，这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。MobX提供了优化应用状态与react组件同步的机制，这种机制就是使用响应式虚拟依赖状态图。        

Mobx 要点

1、定义状态并使其处于可观察

observable可以用任何你喜欢的数据结构来存储状态，比如数组、对象、类。也可以循环数据结构、引用，只要确保所有会随时间流逝而改变的属性打上mobx的标记使得它们变得可观察即可。

import {observable} from 'mobx';

var appState = observable({
    timer: 0
});

2、创建视图以响应状态的变化

上面一段代码，appState 还没有观察到任何的东西，我们可以创建视图，当appState中相关数据发生改变时视图会自动更新。

通常来说，任何函数都可以成为可以观察自身数据的响应式视图。

import {observer} from 'mobx-react';

@observer
class TimerView extends React.Component {
    render() {
        return (<button onClick={this.onReset.bind(this)}>
                Seconds passed: {this.props.appState.timer}
            </button>);
    }

    onReset () {
        this.props.appState.resetTimer();
    }
};

ReactDOM.render(<TimerView appState={appState} />, document.body);

3、更改状态

Mobx可以帮助你以一种简单直观的方式来完成工作。无论是在改变状态的控制器函数中，还是在应该更新的视图中，都没有明确的关系定义。使用observable来装饰你的状态和视图。

appState.resetTimer = action(function reset() {
    appState.timer = 0;
});

setInterval(action(function tick() {
    appState.timer += 1;
}), 1000);

 Mobx核心概念

1、observable & observer（可观察的状态）

通过使用@observable 装饰器可以给我们的类属性添加注解。使用 observable 很像把对象的属性变成excel的单元格。 但和单元格不同的是，这些值不只是原始值，还可以是引用值，比如对象和数组。以下为observable结合autorun的方法。

3、atcions

与flux不同的是，Mobx对于如何处理用户事件是完全开明的。

mobx推荐将修改被观测变量的行为放在action中。

action 只能影响正在运行的函数，而无法影响当前函数调用的异步操作。