Javascript中的状态管理与监测其实一直都在正解决的路上，语言标准方面，从已废弃的Object.observe API，到进入到ES6标准的Proxy，但都只针对单一对象状态监听，对多层对象实现监听只能借助于外部库，于是产生了我们常见的一些解决方案，如RxJS，提出了新的概念 Reactive Stream，即可被观测的事件流(observable event streams)；另一个流行库Mobx则遵循Observer Pattern实现，另外还有一个叫Redux，基于CQRS实现。别说去应用，光是理解这些概念，开发者们都要先掉几根头发。
其实上面几种方案都是围绕着可被观测的对象(Observable Object)这一主题，除了上面几个流行库，在此强烈推荐一个新的更好的解决方案：edata。
以下我们用代码来说明对比这几个状态管理库的核心用法：
RxJS observable
export class DataStore {
public count: BehaviorSubject<number> = new BehaviorSubject(0);
update(newValue: number) { this.count.next(newValue); }
}
export class ButtonComponent {
public count: number;
constructor(private dataStore: DataStore) {
dataStore.count.subscribe(x => this.count = x);
}
onBtnClick() { this.dataStore.update(this.count + 1); }
}上面的代码，我们在 DataStore 设定了一个可供订阅的 count，初始值为0。ButtonComponent 在 constructor 添加了一个对 count 的订阅(subscribe)，并将变动会存到 this.count 里。按钮点击后触发 dataStore.update() 动作，让数据源中 count 加一，进而触发ButtonComponent 中 this.count 改变。
Mobx observable
export class DataStore {
@observable public count: number;
@action
update(newValue: number) { this.count = newValue; }
}
export class ButtonComponent {
public count: number;
constructor(private dataStore: DataStore) {
observe(dataStore, 'count', x => this.count = x.newValue);
}
onBtnClick() { this.dataStore.update(this.count + 1); }
}Mobx使用 @observable 装饰器使对象可被观测，以及 @action 装饰器来定义反应式方法，非常直观。不过这里注意一下 observe() 这段代码，有两个坑：1）dataStore 必须为对象，若是 primitive value 必须要包在 observable.box() 中，增加了复杂度；2）count 值必须要变化才会触发，若改变的是同值，则不会触发！
为了演示 Mobx 这个问题，我们设定一个情景，我们加入 isDataLoading 变量表明是否数据是否已加载。
export class DataStore {
@observable public data:number;
@action
update(newValue: number) { this.data = newValue; }
}
export class ButtonComponent {
public data: number;
public isDataLoading: boolean;
constructor(private dataStore: DataStore) {
observe(dataStore, 'data', x => {
this.data = x.newValue;
this.isDataLoading = false;
});
}
onBtnClick() {
this.isDataLoading = true;
this.dataStore.update(this.data);
}
}这里会产生一个BUG，isDataLoading 一直为 true，因为 this.dataStore.update(this.data) 这句没有改变数值，导致 observe 并没有触发。解决方案就是使用 data = observable.box()，然后使用 data.set(value) 来进行数值设置。
另外还有一个坑，在 Mobx v4 中数组类型判断要非常注意：
var numbers = observable([1,2,3]);
Array.isArray(numbers) // false ???
Array.isArray(numbers.slice()) // true !!!简单对比 RxJS 和 Mobx，可以看出 RxJS 是比较经典的 pub/sub 模式实现，Mobx 更贴近于声明式 + callback风格，但也有不少坑来自于它本身的实现。
重点来了，
快速上手，不想了解太多概念，坑又少，扩展性好，推荐使用edata
我们来看下同样的例子，使用 edata 如何实现：
import {edataProxy} from 'edata'
export const dataStore = edataProxy({
data: 0,
update (newValue: number) {
this.data = newValue
}
})
export class ButtonComponent {
public data: number;
public isDataLoading: boolean;
constructor(private dataStore: EdataProxy) {
dataStore.__watch__('data', x => {
this.data = x.data.value;
this.isDataLoading = false;
})
}
onBtnClick() {
this.isDataLoading = true;
this.dataStore.update(this.dataStore.data);
}
}上面的代码来类比 Mobx，可以看到并没有用到非标准的装饰器语法，更贴近原生，并且没有 Mobx 的那些坑。
这里要注意edataProxy()方法，它使得 dataStore 可以直接使用JS原生方法来存／取对象，但依赖于ES6 Proxy，若要支持IE浏览器，则尽量使用 edata的低阶API。
更多edata介绍可以参考另一篇文章：JS中反应式数据存储方案对比 RxJS, Mobx 与 edata。
这个库的作者当然也是本文的作者，也需要同学们来一起共建，方式包括但不限于：使用并提出建议，PR，Star，转发等。
同学, 如果觉得本文对你有帮助, 欢迎打赏一杯咖啡~
