MobX入门介绍
我参考的文章是官方的入门文章，声称只要10分钟就可以看完，我不会告诉你我看了多半天，英语真是硬伤。
大致介绍一些mobx,是一套简单的，可扩展的，经过历史车轮碾压过的状态管理解决方案。 他是可以独立使用的库，但是很多人都是配合react来使用的，说白了就是替代redux的一套解决方案，前提是，部分场景下，redux在全家桶中的地位还是不可撼动的。
核心观点：
官方介绍说，状态管理是每个应用的核心，如果你想快速打造一个程序的车祸现场，你可以去生成不一致的状态，或者与让状态本地的变量不同步。 言外之意，我的库，可以保证决定不会产出不一致的状态！
怎么做的呢？从根源抓住问题，让所有应用的东西都自动的被状态驱动。
下面看看代码，概念看多了就迷糊了。先看一下官方给出的没有引入 mobx的程序。
class TodoStore {
todos = [];
get completedTodosCount() {
return this.todos.filter(
todo => todo.completed === true
).length;
}
report() {
if (this.todos.length === 0)
return "";
return `Next todo: "${this.todos[0].task}". ` +
`Progress: ${this.completedTodosCount}/${this.todos.length}`;
}
addTodo(task) {
this.todos.push({
task: task,
completed: false,
assignee: null
});
}
}
const todoStore = new TodoStore();
看到这段代码，他抽离出来了一套逻辑，没有引入具体对象，核心状态是报告一下todolist的情况，有就显示，没有就不显示。
添加任务，获取完成任务的数量，以及未完成任务展示任务。
然后呢，分配一个对象作为实例完成todos的功能，
todoStore.addTodo("read MobX tutorial");
console.log(todoStore.report());
todoStore.addTodo("try MobX");
console.log(todoStore.report());
todoStore.todos[0].completed = true;
console.log(todoStore.report());
todoStore.todos[1].task = "try MobX in own project";
console.log(todoStore.report());
todoStore.todos[0].task = "grok MobX tutorial";
console.log(todoStore.report());
打印的结果大概是这个样子的。例子和mobx的理念一致，依赖追踪是动态生成的。
Next todo: "read MobX tutorial". Progress: 0/1
Next todo: "read MobX tutorial". Progress: 0/2
Next todo: "read MobX tutorial". Progress: 1/2
Next todo: "read MobX tutorial". Progress: 1/2
Next todo: "grok MobX tutorial". Progress: 1/2
mobx做到的事情就是帮你调用report这个函数，自动执行依赖于状态的代码，官方给出的例子是，就像电子表格中你改变一个数据，然后某一个数据（比如总量）也会随之发生改变。
mobx生成依赖两个装饰器，@computed和@observable配合使用。简单点说，observable让变量可跟踪，computed，当observable变量变化就会调用一下去计算是否需要更新ui。
实现起来大概是这个样子的。
class ObservableTodoStore {
@observable todos = []; 顾名思义，让这个属性变得可以观察，通常是有什么改动可以立即得知
@observable pendingRequests = 0;
constructor() {
mobx.autorun(() => console.log(this.report));
}
@computed get completedTodosCount() { 自动计算，标识这些可以被状态派生出来
return this.todos.filter(
todo => todo.completed === true
).length;
}
@computed get report() {
if (this.todos.length === 0)
return "";
return `Next todo: "${this.todos[0].task}". ` +
`Progress: ${this.completedTodosCount}/${this.todos.length}`;
}
addTodo(task) {
this.todos.push({
task: task,
completed: false,
assignee: null
});
}
}
const observableTodoStore = new ObservableTodoStore();
使用下列代码调用：
observableTodoStore.addTodo("read MobX tutorial");
observableTodoStore.addTodo("try MobX");
observableTodoStore.todos[0].completed = true;
observableTodoStore.todos[1].task = "try MobX in own project";
observableTodoStore.todos[0].task = "grok MobX tutorial";
Next todo: "read MobX tutorial". Progress: 0/1 打印结果。
Next todo: "read MobX tutorial". Progress: 0/2
Next todo: "read MobX tutorial". Progress: 1/2
Next todo: "grok MobX tutorial". Progress: 1/2
为什么只打印了四行呢？也就是说，第四个语句并没有触发console.log事件，原因就是（大概可以这么理解），经过计算之后发现打印的内容和刚才是一致的，所以就没有必要执行这个函数了。
@observer
React组件没有做到开箱即用，mobx提供了一个装饰器，包裹了组件，让render方法自动调用，保证你的组件和状态的同步。使用了mobx之后，就不需要再调用setState了，组件会变得 “智能”。
这样，每次改变mobx生成的store对象数据，页面就会随之改变。
这里说明一下官方网站的代码可以编辑然后运行看效果，我粘贴在这里仅供参考用。
@observer 监测数据发生变动，调用render方法。
class TodoList extends React.Component {
render() {
const store = this.props.store; 外层组件传入，mobx对象。
return (
{ store.report } 展示任务完成情况统计
{ store.todos.map(
(todo, idx) =>
{ store.pendingRequests > 0 ? : null } 异步加载
//新增方法
(double-click a todo to edit)
{ todo.task } 展示task
{ todo.assignee
? { todo.assignee.name } //如果todo新增内容有assignee就可以显示分配的任务给谁
: null
}
);
}
onToggleCompleted = () => {
const todo = this.props.todo;
todo.completed = !todo.completed; 变更完成情况
}
onRename = () => {
const todo = this.props.todo;
todo.task = prompt('Task name', todo.task) || todo.task;
}
}
ReactDOM.render(
这代码看上去就很清晰了，使用这三个不同的修饰符完成不同的任务，数据渲染也不用你操心了。
修改一下分配的角色：
var peopleStore = mobx.observable([
{ name: "Michel" },
{ name: "Me" }
]);
observableTodoStore.todos[0].assignee = peopleStore[0];
observableTodoStore.todos[1].assignee = peopleStore[1];
peopleStore[0].name = "Michel Weststrate";
这个操作，是创建了一个新的mobx的store，当你想更新分配人的时候，大可直接去变动peopleStore,mobx会把你的变动带入到observableTodoStore中的。只要对象是observable的，他就可以跟踪。
异步更新数据也是手到擒来，看到上面代码了解到还有个标签，就可以模拟进行异步加载了，代码如下：
observableTodoStore.pendingRequests++; //开始loading
setTimeout(function() {
observableTodoStore.addTodo('Random Todo ' + Math.random());
observableTodoStore.pendingRequests--; //结束laoding
}, 2000);
这就是mobx入门介绍了，有问题留言哦。