mobx源码初读笔记

mobx 3.1.9

autorun

  • autorun
  • observable
  • globalstate
  • reaction

实现:

1
2
3
4
5
6
7
8
9
var bankUser = mobx.observable({
name: '张三',
income: 3,
debit: 2
});

mobx.autorun(() => {
console.log('张三的账户存款:', bankUser.income);
});

可观察watcher

调用 mobx.observable() 方法,创建了 observable 对象, 对象的所有属性都拷贝至一个克隆对象并将克隆对象设置成 可观察 — 猜测使用的是es6的proxy方法

观察员watcher有两个非常重要的行为特征:

  • 当有人请求观察员所监控的值(比如income)时,会触发 MobX 所提供的 reportObserved 方法;
  • 当观察员所监控的值(比如income)发生变化时,会触发 MobX 所提供的 propagateChanged 方法;

自动执行autorun

含义: 响应式函数 —— 响应观察值的变化而自动执行指定的函数。

脉络

  1. 创建 Reaction 类型对象,关键特征是 监督并控制任务的执行

  2. 分配任务

  3. 立即执行一次autorun中的函数,通过reaction.schedule()

reaction.schedule

  • 探长入列
  • 让队列所有探长执行 runReaction 方法

探长是个啥玩意儿

主流程大致只有 4 步:

  • 开始执行(runReaction)
  • 判断是否执行(shouldCompute)
  • 执行任务(onInvalidate)
  • 结束

有一个很重要的 shouldCompute 判断方法步骤,根据这个方法探长可以自行判断 是否执行任务,并非所有的任务都需要执行,这一步的作用是优化 MobX 执行效率。

开始执行(runReaction)

为开始执行做准备工作
用 startBatch() 开头,用 endBatch() 结尾,中间隔着 onInvalidate。

startBatch() 和 endBatch() 这两个方法一定是成对出现,用于影响 globalState 的 inBatch 属性,表明开启/关闭 一层新的事务

执行任务(onInvalidate)

onInvalidate 是 Reaction 类的一个属性,且在初始化 Reaction 时传入到构造函数中的,这样做的目的是方便做扩展。

autorun 方法本质就是一种预定义好的 Reaction —— 你可以依葫芦画瓢,将自定义 onInvalidate 方法传给 Reaction 来实现自己的 计划任务

© 2019 lvbin's Blog All Rights Reserved.
Theme by hiero