React + MobX 状态管理入门及实例（一）
前言
现在最热门的前端框架，毫无疑问是React。
React是一个状态机，由开始的初始状态，通过与用户的互动，导致状态变化，从而重新渲染UI。
对于小型应用，引入状态管理库是"奢侈的"。
但对于复杂的中大型应用，引入状态管理库是"必要的"。
现在热门的状态管理解决方案Redux，MobX相继进入开发者的视野。
正如爱因斯坦所说的 “ 让一切事物尽可能的简单，但不要简单”。
尽管让我们来填一填 MobX 的坑。
介绍
1.入门
对于应用开发中的常见问题，React 和 MobX都提供了最优和独特的解决方案。React 提供了优化UI渲染的机制， 这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。MobX 提供了优化应用状态与 React 组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且永远保持是最新的。
2.安装
npm install --save mobx mobx-react
3.核心概念
1.state(状态)
状态是驱动应用的数据。
2.observable(value) && @observable
Observable 值可以是JS基本数据类型、引用类型、普通对象、类实例、数组和映射。其修饰的state会暴露出来供观察者使用。
const map = observable.map({ key: "value"});
map.set("key", "new value");
const list = observable([1, 2, 4]);
list[2] = 3;
const person = observable({
firstName: "Clive Staples",
lastName: "Lewis"
});
person.firstName = "C.S.";
const temperature = observable(20);
temperature.set(25);
3.observer(观察者)
被observer修饰的组件，将会根据组件内使用到的被observable修饰的state的变化而自动重新渲染
import {observer} from "mobx-react";
var timerData = observable({
secondsPassed: 0
});
setInterval(() => {
timerData.secondsPassed++;
}, 1000);
@observer class Timer extends React.Component {
render() {
return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
}
};
React.render(<Timer timerData={timerData} />, document.body);
4.action(动作)
只有在 actions 中，才可以修改 Mobx 中 state 的值。
注意：当你使用装饰器模式时，@action 中的 this 没有绑定在当前这个实例上，要用过 @action.bound 来绑定 使得 this 绑定在实例对象上。
@action.bound setName () {
this.myName = 'HUnter'
}
actions ------> state ------> view
5.computed
计算值(computed values)是可以根据现有的状态或其它计算值衍生出的值。
getter：获得计算得到的新state并返回。
setter： 不能用来直接改变计算属性的值，但是它们可以用来作“逆向”衍生。
class Foo {
@observable length = 2;
@computed get squared() {
return this.length * this.length;
}
set squared(value) { // 这是一个自动的动作，不需要注解
this.length = Math.sqrt(value);
}
}
6.autorun
这通常是当你需要从反应式代码桥接到命令式代码的情况，例如打印日志、持久化或者更新UI的代码。
var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));
var disposer = autorun(() => console.log(sum.get()));
// 输出 '6'
numbers.push(4);
// 输出 '10'
disposer();
numbers.push(5);
// 不会再输出任何值。`sum` 不会再重新计算。
经验法则：如果你有一个函数应该自动运行，但不会产生一个新的值，请使用autorun。 其余情况都应该使用 computed。
7.reactions
Reactions 和计算值很像，但它不是产生一个新的值，而是会产生一些副作用，比如打印到控制台、网络请求、递增地更新 React 组件树以修补DOM、等等。 简而言之，reactions 在 响应式编程和命令式编程之间建立沟通的桥梁。
4.应用实例
1.TodoList
技术栈：react + react-router(v4)+mobx+webpack
效果图：
很简单的一个小demo，这里不分析了，源码里有部分注释帮助理解。
github地址：https://github.com/zhaoyu69/mobx-demo
作者：走叉火日立
链接：https://www.jianshu.com/p/bea658a8b721
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
