MobX MobX - 锐客网

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。

任何源自状态并且不会再有任何进一步的相互作用的东西就是衍生。
1. 用户界面
2. 衍生数据，如剩下的待办事项的数量。
3. 后端集成，如把变化发送到服务器端。
MboX 区分两种类型的衍生：
1. Computed values(计算值) - 它们是永远可以使用纯函数(pure function)从当前可观察状态中衍生出的值。
2. 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); } }

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