Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
117 lines (86 sloc) 2.41 KB

用 Proxy 实现反应式计算

MobX 是一个反应式数据框架。

反应式计算就像 Excel 表单。数据 B 依赖于数据 A,如果 A 改变了,那么 B 应该自动更新。

一个简单的例子如下:

const { observable, autorun } = require('mobx');

let counter = observable({
	value: 0,
});

// 每次 counter.value 有改动,autorun 的回调会自动运行
autorun(() => {
	console.log("counter:", counter.value);
});


setInterval(() => {
	// 改动 counter.value 会触发 autorun 的回调
	counter.value += 1;
}, 1000);

/*
输出

counter: 0
counter: 1
counter: 2
counter: 3
counter: 4
counter: 5
...
*/

autorun 在运行回调的时候会去分析哪些对象的哪些属性有被读取。当任何数据依赖有改动,autorun 会再次去运行回调。

下面这个例子演示多个可观察的对象,和多个 autorun:

// 创建两个可观察的对象
let o = observable({
	a: 1,
});

let o2 = observable({
	b: 2,
});

// 可以直接读取对象的属性
console.log(o.a);
// 1
console.log(o.b);
// 2

// autorun 会先运行一次回调,分析可观察对象那些属性有被引用。
// o 是个可观察对象,每次 o.a 更改都要重新运行一次回调。
autorun(() => {
	// 回调 1 - o.a 有改动
	console.log(`a => ${o.a}`)
});

// o2 是个可观察对象,每次 o2.b 更改都要重新运行一次回调。
autorun(() => {
	// 回调 2 - o2.b 有改动
	console.log(`b => ${o2.b}`)
});


// 每次 o.a 或者 o2.b 更改都要重新运行一次回调。
autorun(() => {
	// 回调 3 - o.a 或者 o2.b 有改动
	console.log(`a + b => ${o.a + o2.b}`)
});

// 会触发回调 1, 2
o.a = 100;

// 会触发回调 2,3
o2.b = 200;

/*
输出:

1
2
a => 1
b => 2
a + b => 3
a => 100
a + b => 102
b => 200
a + b => 300
 */

请利用 ES6 Proxy 来实现 autorunobservable

observable 只需要支持对象,不需要支持嵌套对象。

参考资料

讨论群

微信加我好友 (hayeah666),我拉你入讨论群。

hayeah666