概念 & 原则

概念

在你的MobX应用中区分下列概念，之前你看到了很多要点，现在让我们深入的了解下它们

1. State

State 是驱动你的应用程序中的数据，通常他们有一些 特定的主状态 ，比如一个todo列表，并且还有一些当前选中行的 视图状态 ，请记住state就像是电子表格中的单元格。

2. Derivations

任何来自state的东西都是可以派生的 (Anything that can be derived from the state without any further interaction is a derivation)

派生有很多种表现形式

用户界面
衍生数据，比如todos中离开状态
后端通信，比如将改变发给服务器

区分MobX两种不同的派生：

Computed values，这些是可以使用纯函数从当前使用的可观察状态派生出的值
Reactions，它是状态变化时自动触发的副作用，是执行命令和响应式编程中的桥梁，我们要明白，它们最终想达到的就是 I/O。

大家刚开始试用MobX时会频繁的使用reaction，这里有条黄金法则：如果你想根据现有状态创建一个数据，请使用computed

回到和电子表格的对比，computed就像使用公式会推导出一个值，但是还需要一个reaction重绘GUI，这样用户就可以在屏幕上看到了。

3. Actions

一个Action就是一段改变State的代码，比如用户事件，后端数据保存，回调事件等。Action就像用户在电子表格的单元格中新输入一个值。

在MobX中你可以明确的定义Actions，从而使你更清晰的组织代码结构。如果在严格模式下使用MobX，MobX会强制执行只有action才可以修改state。

Principles

MobX提供了一套当 actoins 改变 state 时，然后 state 再反向作用于 views 的单向数据流。

Action, State, View

当状态改变时，所有派生单元都会自动的更新，这样的结果就是你永远不可能观察到中间值。

默认情况下，所有的派生都是异步更新的，这有就意味着，例如action可以在状态改变之后安全的推导计算值。

Computed 值是延迟更新的。任何没有在执行中使用到的computed值是不会自动更新的，除非它是一个副作用需要的(I/O)。如果视图不在使用它，它将会被进行垃圾回收。

所有的computed值都应该是纯净的，它们不应该被改变状态。

Illustration

以下演示了上述的介绍的概念和原则

import {observable, autorun} from 'mobx';

var todoStore = observable({
    /* some observable state */
    todos: [],

    /* a derived value */
    get completedCount() {
        return this.todos.filter(todo => todo.completed).length;
    }
});

/* a function that observes the state */
autorun(function() {
    console.log("Completed %d of %d items",
        todoStore.completedCount,
        todoStore.todos.length
    );
});

/* ..and some actions that modify the state */
todoStore.todos[0] = {
    title: "Take a walk",
    completed: false
};
// -> synchronously prints 'Completed 0 of 1 items'

todoStore.todos[0].completed = true;
// -> synchronously prints 'Completed 1 of 1 items'

十分钟入门 MobX + React you can dive deeper into this example and build a user interface using React