MobX 是一种简单、可扩展的状态管理。它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。
任何源自应用状态的东西都应该自动地获得，包括UI、数据序列化、服务器通讯，等等。
React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。
image.png
安装
安装：npm install mobx --save
React 绑定库：npm install mobx-react --save
概念与原则
1 state (状态)
- 状态 是驱动应用的数据
2 Derivations (衍生)
黄金法则: 如果你想创建一个基于当前状态的值时，请使用 computed。
-
任何 源自状态并且不会再有任何进一步的相互作用的东西就是衍生。
用户界面
衍生数据，如剩下的待办事项的数量。
后端集成，如把变化发送到服务器端。
-
MboX 区分两种类型的衍生：
Computed values(计算值) - 它们是永远可以使用纯函数(pure function)从当前可观察状态中衍生出的值。
Reactions(反应) - Reactions 是当状态改变时需要自动发生的副作用。需要有一个桥梁来连接命令式编程(imperative programming)和响应式编程(reactive programming)。或者说得更明确一些，它们最终都需要实现I / O 操作。
3 Actions (动作)
- 动作 是任一一段可以改变状态的代码。用户事件、后端数据推送、预定事件、等等。
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
- 如果你想响应式的产生一个可以被其它 observer 使用的值，请使用 @computed
- 如果你不想产生一个新值，而想要达到一个效果，请使用 autorun
- 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 版本会知道声明了两个具有相同名称的属性。
