一、定义
mobx通过透明的函数响应式编程，使得状态管理变得简单和可扩展：
任何源于应用状态的东西都应该自动地获得。（其中包括UI、数据序列化、服务器通讯等等）
React和Mobx是一对强力组合。
React和Mobx都提供了最优和独特的解决方案。React提供了优化UI渲染的机制，这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。Mobx提供了优化应用状态与React组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且永远保持最新。
二、observable 可观察的状态
mobx为现有的数据结构添加可观察的功能时，通过使用@observable装饰器来给你的类属性添加注释就可以简单地完成。
import { observable } frorm 'mobx';
class Todo {
id = Math.random();
@observable title = "";
@observable finitshed = false;
}
使用observable很像把对象的属性变成excel的单元格，但和单元格不同的是，这些值不只是原始值，还可以是引用值，比如对象和数组。
如果你的环境不支持装饰器语法，也不必担心，mobx可以通过decorate工具在不支持装饰器语法的情况下使用。（但是多数mobx用户更喜欢装饰器语法，因为更简洁）
例如上面那段代码，ES5的版本应该是：
import { decorate, observable } from "mobx";
class Todo {
id = Math.random();
title = "";
finished = false;
}
decorate(Todo, {
title: observable,
finished: observable
})
三、computed 计算值
使用mobx，你可以定义在相关数据发生变化时自动更新的值。通过@computed装饰器或者利用（extend）Observable时调用的getter / setter函数来进行使用。
class Todo {
@observable todos = [];
@computed get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.finished).length;
}
}
mobx会对在执行跟踪函数期间读取的任何现有的可观察属性做出反应。
四、优点
- 简单且可扩展
Mobx是状态管理库中侵入性最小的之一。这使得mobx的方法不但简单，而且可扩展性也非常好。 - 使用类和真正的引用
使用mobx不需要使用数据标准化。这使得十分适合那些异常复杂的领域模型。 - 保证参照完整性
因为数据不需要标准化，所以mobx会自动跟踪状态和衍生之间的关系。 - 更简单的actions更便于维护
使用mobx修改状态是非常简单的，你只需要简单的写出你的目的，mobx会替你处理好剩下的事情。 - 细粒度的可观测性是高效的
mobx构建应用中所有衍生的图形，以找到保持最新状态所需的重新计算的最少次数。“衍生一切”或许听上去开销很昂贵，但mobx构建虚拟衍生图保持衍生于状态同步所需的冲计算的数量最小化。
简单来说，是因为mobx会在数据上建立更细粒度的"监听器"，而不是通过程序来控制。
其次，mobx看到衍生之间的因果关系。因此它可以为衍生排序，使得衍生不会运行多次或引入缺陷。
网友评论