目录
- 注意事项
- 延迟更新与立刻更新
- 现象
- 通过现象了解原理
- 疑问1:
this.a = 123做了什么？ - 疑问2:
tagret.setData为什么没有立马更新？ - 最终：实际运行的代码是什么样的？
- 如何解决？
- 疑问1:
- 总结、优化
注意事项
延迟更新与立刻更新
为了提升性能，在 store 中的字段被更新后，并不会立刻同步更新到 this.data 上，而是等到下个 wx.nextTick 调用时才更新。（这样可以显著减少 setData 的调用次数。）
如果需要立刻更新，可以调用：
-
this.updateStoreBindings()（在 behavior 绑定 中） -
this.storeBindings.updateStoreBindings()（在 手工绑定 中）
摘自官方文档：https://github.com/wechat-miniprogram/mobx-miniprogram-bindings
现象
🚩「在 store 中的字段被更新后，并不会立刻同步更新到 this.data 上」。详见案例代码⬇️
// myStore
{
aaa: 0,
setAAA(){
this.a = 123;
}
}
// Page/index.js
const pageConfig = {
onLoad() {
this.storeBindings = createStoreBindings(this, {
store: myStore,
fields: ['aaa'],
actions: ['setAAA'],
});
},
// 通过store的action:setAAA去更新fields aaa
// 后立即获取data.aaa的值
getAAA(){
this.setAAA();
console.log(this.data.aaa); // 现象：其实还是为0
},
onUnload() {
this.storeBindings.destroyStoreBindings();
}
};
通过现象了解原理
- 疑问1:
this.a = 123做了什么？ - 疑问2:
target.setData为什么没有立马更新？ - 最终：实际运行的代码是什么样的？
- 如何解决？
疑问1: this.a = 123做了什么？
import { observable, reaction } from 'mobx'
const store = observable({
a: 0,
setAAA(){
this.a = 123;
}
})
// mobx-miniprogram-bindings模拟实现
reaction(
() => fields.aaa,
value => {
target.setData({aaa: value})
}
)
- 第一步：MobX的
observable定义状态并使其可观察， - 第二步：MobX的
reaction回调方法响应状态的变化， - 第三步：在回调函数中会执行
targe.setData(这里的target指我们在注册时传入的this上下文) - 所以，当
this.a变化时，会直接映射到小程序的data数据中即结束，后续就交给小程序自己的数据驱动模式了
疑问2: target.setData 为什么没有立马更新？
🚩文档中写到，「为了提示性能，会将响应变化的状态合并，等到下个wx.nextTick 调用时才更新」。
可以通过使用场景来理解：当同时有多个fields需要被更新时
this.aaa = 123;
this.bbb = {};
this.ccc = [];
// reaction的回调会执行3次,页面也会执行3次setData
target.setData({aaa: value})
target.setData({bbb: value})
target.setData({ccc: value})
一个动作周期内最好只更新一次。因此为了避免不必要的渲染，使用了scheduleSetData设计模式。
顺便提一下，React也是通过Scheduler来进行整个渲染任务的管理，即一次事件循环执行一次调度任务。
// 改造reaction的回调函数
reaction(
() => fields.aaa,
value => {
scheduleSetData(aaa, value)
}
)
// setData combination
let pendingSetData = null;
function applySetData() {
if (pendingSetData === null) return;
const data = pendingSetData;
pendingSetData = null;
// 映射到被绑定的Page或Component中
target.setData(data);
}
function scheduleSetData(field, value) {
if (!pendingSetData) {
pendingSetData = {};
// 使用小程序提供的时间循环回调
wx.nextTick(applySetData);
}
// pending过程中合并下一次需要被更新的field状态
pendingSetData[field] = value;
}
最终：实际运行的代码是什么样的？
简单理解为 setData执行时机被放在了wx.nextTick内，回顾上面的getAAA方法
getAAA(){
// this.setAAA(); 实际代码可理解为
wx.nextTick(()=>{
this.setData({aaa: 123})
})
console.log(this.data.aaa); // 这句比setData先执行了，所以其实还是为0
},
如何解决？
- 也延迟获取，在下一个事件循环中获取值
getAAA(){
wx.nextTick(()=>{
this.setData({aaa: 123})
})
wx.nextTick(()=>{
console.log(this.data.aaa); // 在下一个事件循环中获取值
})
}
- 不想延迟获取，想立刻更新
可以直接提前调用applySetData，越过等待scheduleSetData的执行时机 - 代码详见疑问2中
getAAA(){
wx.nextTick(()=>{
this.setData({aaa: 123})
})
// updateStoreBindings提供将`applySetData`方法暴露出来并执行
this.storeBindings.updateStoreBindings()
console.log(this.data.aaa);
}
总结、优化
通过了解原理可以更好地理解和使用，达到最佳实践：
- 通过MobX的对象观察原理，知道只能观察整个对象的浅层变化，对深层变化无法感知
// 如果尝试在 store 中：
this.someObject.someField = "xxx";
// 这样是不会触发界面更新的。请考虑改成：
this.someObject = Object.assign({}, this.someObject, { someField: "xxx" });
- MobX的解绑仅仅是解绑响应状态的变化，状态的最新值仍被保留
const destroyStoreBindings = () => {
reactions.forEach(reaction => reaction());
};
因此要想重置状态的数据，可以在解绑后重置，可减少一次不必要的更新
- this.resetData();
this.storeBindings.destroyStoreBindings();
+ this.resetData();
