javascript - mobx 中的 @observable 和 @observable.ref 修饰符有什么区别?
问题描述
Mobx 支持 @observable 和 @observable.ref 修饰符,他们的官方文档说
observable: This is the default modifier, used by any observable. It clones and converts any (not yet observable) array, Map or plain object into it's observable counterpart upon assignment to the given property
observable.ref: Disables automatic observable conversion, just creates an observable reference instead.
我不明白为什么我们需要为已经存在的 observable 创建一个 observable 引用。这两个有何不同,它们的用例是什么?
解决方案
observable.ref
只会跟踪对对象的引用更改,这意味着您需要更改整个对象才能触发反应。因此,例如,如果您有一个通过引用跟踪的可观察数组,则不会跟踪该数组的内容。此外,如果您将项目添加到数组中,也不会跟踪更改。
import { observable, reaction } from "mobx";
const test = observable(
{
reference: [{ id: 1 }]
},
{
reference: observable.ref
}
);
reaction(
() => {
return test.reference.length;
},
() => {
console.log("Reaction 1: reference length changed");
}
);
reaction(
() => {
return test.reference[0];
},
() => {
console.log("Reaction 2: reference item changed");
}
);
test.reference[0] = { id: 2 }; // this will not trigger the reactions
test.reference.push({ id: 3 }); // this will not trigger the reactions
test.reference.pop(); // this will not trigger the reactions
test.reference = []; // this will trigger both reactions
推荐阅读
- python-3.x - 如何更新我的脚本以使其适用于新版本的 numpy?
- html - CSS 省略号不适用于特定的网络字体
- google-cloud-platform - 数据流输出“错误卸载磁盘”日志
- django - Django ValueError 只能比较相同标签的系列对象
- c++ - 如何编写插入运算符函数模板?
- html - 使用 CSS 的垂直 3D 条
- r - 如何将循环内创建的每个数据框添加到excel中的单独工作表中?
- python - 为自定义的基于 lua 的脚本语言编写包装器
- python - Tkinter 与 OOP python
- laravel - 如何使用 Laravel 模型连接多个表