通过mobx-miniprogram-bindings学习：「响应式绑定」与「任务调度」

目录

• 注意事项
  • 延迟更新与立刻更新
• 现象
• 通过现象了解原理
  • 疑问1: this.a = 123做了什么？
  • 疑问2: tagret.setData 为什么没有立马更新？
  • 最终：实际运行的代码是什么样的？
  • 如何解决？
• 总结、优化

---

注意事项

延迟更新与立刻更新

为了提升性能，在 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
},

如何解决？

1. 也延迟获取，在下一个事件循环中获取值

getAAA(){ 
  wx.nextTick(()=>{
    this.setData({aaa: 123})
  })

  wx.nextTick(()=>{
    console.log(this.data.aaa); // 在下一个事件循环中获取值
  })
 }

2. 不想延迟获取，想立刻更新
   可以直接提前调用applySetData，越过等待scheduleSetData的执行时机 - 代码详见疑问2中

getAAA(){ 
  wx.nextTick(()=>{
    this.setData({aaa: 123})
  })

  // updateStoreBindings提供将`applySetData`方法暴露出来并执行
  this.storeBindings.updateStoreBindings()
   
  console.log(this.data.aaa);
 }

总结、优化

通过了解原理可以更好地理解和使用，达到最佳实践：

1. 通过MobX的对象观察原理，知道只能观察整个对象的浅层变化，对深层变化无法感知

// 如果尝试在 store 中：
this.someObject.someField = "xxx";

// 这样是不会触发界面更新的。请考虑改成：
this.someObject = Object.assign({}, this.someObject, { someField: "xxx" });

2. MobX的解绑仅仅是解绑响应状态的变化，状态的最新值仍被保留

const destroyStoreBindings = () => {
  reactions.forEach(reaction => reaction());
};

因此要想重置状态的数据，可以在解绑后重置，可减少一次不必要的更新

- this.resetData();
this.storeBindings.destroyStoreBindings();
+ this.resetData();