MobX

MobX 是一种简单、可扩展的状态管理。它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。

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

React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

image.png

安装

1. 安装：npm install mobx --save

2. React 绑定库：npm install mobx-react --save

概念与原则

1 state (状态)

1. 状态 是驱动应用的数据

2 Derivations (衍生)

黄金法则: 如果你想创建一个基于当前状态的值时，请使用 computed。

1. 任何 源自状态并且不会再有任何进一步的相互作用的东西就是衍生。

   1. 用户界面

   2. 衍生数据，如剩下的待办事项的数量。

   3. 后端集成，如把变化发送到服务器端。

2. MboX 区分两种类型的衍生：

   1. Computed values(计算值) - 它们是永远可以使用纯函数(pure function)从当前可观察状态中衍生出的值。

   2. Reactions(反应) - Reactions 是当状态改变时需要自动发生的副作用。需要有一个桥梁来连接命令式编程(imperative programming)和响应式编程(reactive programming)。或者说得更明确一些，它们最终都需要实现I / O 操作。

3 Actions (动作)

1. 动作 是任一一段可以改变状态的代码。用户事件、后端数据推送、预定事件、等等。

import {observable, autorun} from 'mobx';
/*--------------------Observable-----------------*/
var todoStore = observable({
    /* 一些观察的状态 */
    todos: [],
/*--------------------Computed-------------------*/
    /* 推导值 */
    get completedCount() {
        return this.todos.filter(todo => todo.completed).length;
    }
});
/*-------------------Reactions----------------*/
/* 观察状态改变的函数 */
autorun(function() {
    console.log("Completed %d of %d items",
        todoStore.completedCount,
        todoStore.todos.length
    );
});
/*-------------------Actions-------------------*/
/* ..以及一些改变状态的动作 */
todoStore.todos[0] = {
    title: "Take a walk",
    completed: false
};
// -> 同步打印 'Completed 0 of 1 items'

todoStore.todos[0].completed = true;
// -> 同步打印 'Completed 1 of 1 items'

核心 API---observable 相关

1 observable(value)

用法：

observable(value) // 此 API 只有在它可以被制作成可观察的数据结构(数组、映射或 observable 对象)时才会成功。对于所有其他值，不会执行转换。

@observable classProperty = value

2 @observable

@observable 可以在实例字段和属性 getter 上使用。 对于对象的哪部分需要成为可观察的，@observable 提供了细粒度的控制。

import { observable, computed } from "mobx";

class OrderLine {
    @observable price = 0;
    @observable amount = 1;

    @computed get total() {
        return this.price * this.amount;
    }
}

3 observable 对象 （objects）

用法：

observable.object(props, decorators?, options?) 或者 将对象传给observable ===> observable({...})

4 observable 数组 （arrays）

用法：

observable.array(values?) 或者 将数组传给observable ===> observable([...])

5 observable 映射 （map）

用法：

observable.map(values, options ?)

// values 可以是对象、 数组或者字符串键的 ES6 map

// 通过 ES6 Map 构造函数，你可以使用 observable(new Map()) 或使用装饰器 @observable map = new Map() 的类属性来初始化 observable 映射 。

6 原值类型值 和 引用类型值 （boxed values）

用法：

observable.box(value) 接收任何值并把值存储到箱子中。

使用 .get() 可以获取当前值，使用 .set(newValue) 可以更新值。使用它的 .observe 方法注册回调，以监听对存储值的更改。

import {observable} from "mobx";

const cityName = observable.box("Vienna");
//---------------------------------------- .get() ----------------------------------------
console.log(cityName.get());
// 输出 'Vienna'
//---------------------------------------- 回调 当 .set() 时触发 ----------------------------------------
cityName.observe(function(change) {
    console.log(change.oldValue, "->", change.newValue);
});
//---------------------------------------- .set() ----------------------------------------
cityName.set("Amsterdam");
// 输出 'Vienna -> Amsterdam'

7 装饰器 （decorators）

核心 API---对 observables 作出相应

1 （@）computed

1. 如果你想响应式的产生一个可以被其它 observer 使用的值，请使用 @computed

2. 如果你不想产生一个新值，而想要达到一个效果，请使用 autorun

1. observable.object 和 extendObservable 都会自动将 getter 属性推导成计算属性：

const orderLine = observable.object({
    price: 0,
    amount: 1,
    get total() {
        return this.price * this.amount
    }
})

2. setter 可以用来作“逆向”衍生：

const orderLine = observable.object({
    price: 0,
    amount: 1,
    get total() {
        return this.price * this.amount
    },
    set total(total) {
        this.price = total / this.amount // 从 total 中推导出 price
    }
})
/*------------------------------------------------------------------------------------------------------------------*/
class Foo {
    @observable length = 2;
    @computed get squared() {
        return this.length * this.length;
    }
    set squared(value) { // 这是一个自动的动作，不需要注解
        this.length = Math.sqrt(value);
    }
}

注意: 永远在 getter 之后 定义 setter，一些 TypeScript 版本会知道声明了两个具有相同名称的属性。