================媒介===================
- 初志：以系列故事的体式格局展示 MobX 源码逻辑，尽量以易懂的体式格局解说源码；
本系列文章：
- 文章编排：每篇文章分红两大段，第一大段以简朴的侦察系列故事的情势解说（所触及人物、场景都以 MobX 中的观点为原型建立），第二大段则是相对于的源码解说。
- 本文基于 MobX 4 源码解说
=======================================
在写本文的时刻，由于 MobX 以及升级到 4.x，API 有较大的变化，因而后续的文章默许都将基于 4.x 以上版本举行源码浏览。
前一篇文章依然以 mobx v3.5.1 的源码，autorun 逻辑在新版中没有变动，因而源码逻辑依旧一致。
A. Story Time
1、 场景
为了多维度掌控嫌疑犯的犯法特征数据，你（警署最高主座）想要猎取并实时监控张三的 贷款数额、存贷比（存款和贷款二者比率） 的变化。
因而你就制定了新的敕令给实行官 MobX：
var bankUser = mobx.observable({
income: 3,
debit: 2
});
var divisor = mobx.computed(() => {
return bankUser.income / bankUser.debit;
});
mobx.autorun(() => {
console.log('张三的贷款：', bankUser.debit, '；张三的存贷比: ' + divisor);
});
相比上一次的敕令，除了监控张三贷款这项直接的目标，还须要监控 贷款比（divisor） 这项间接目标。
实行官 MobX 稍作思忖，要完成这个使命比之前的要难一点点，须要费一点儿精神。
不过，这也难不倒才能壮大的 MobX 实行官，一番战略调解以后，从新拿出新的实行设计。布置实行以后，当张三去银行存款、贷款后，这些变化都实时反应出来了：
2、布置设计
此次的布置和前一次相差不大，除了须要让视察员 O2（看管 income）介入进来以外，考虑到警署最高主座所需的 存贷比 （divisor），还得派出另一类职员 —— 会计师：
- 会计师：此类职员特地担任盘算，处置 数据的再加工（此项使命中，就是汇集数据并盘算 存贷比）
会计师是一个很有意义的角色，要想明白他们，必须得思索他们的数据“从哪儿来？到哪里去？” 这两个题目：
- 从哪儿来：从视察员那儿猎取，也可以从其他会计师那儿猎取；
- 到哪儿去：所临盆的数据，要么是被探长消耗，要么被其他会计师所用；（固然，没有人消耗他所临盆的数据也是可以的，不过这就得追查 MobX 实行官的义务了，浪费了人力资源）
引入了会计师角色以后，MobX 实行官从新绘制了布置设计图：
诠释一下此设计图的意义：
- 明白此次使命是 当张三账户存款或许贷款变动时，打印其贷款数额（
debit）和存贷比（divisor）：
() => {
console.log('张三的贷款：', bankUser.debit, '；张三的存贷比: ' + divisor);
}- 将使命指派给实行组中的探长 R1
- 调派 2 名视察组中的视察员 O1、O2 离别监察张三账户的
bankUser.income属性和bankUser.debit属性； - 调派盘算组中的会计师 C1 盘算张三的贷款比，其所需数值来源于视察员 O1、O2；
- 探长 R1 使命中所需的“张三的账户存款” 数值从视察员 O2 那儿猎取；所需的 “张三的存贷比” 数值从会计师 C1 那儿猎取；
- 同时架设数据谍报室，轻易信息交流；
2.1、布置细节
由于照样 autorun 敕令，所以依然实行 A设计设计（概况参考上一篇《【用故事解读 MobX源码（一）】 autorun》）MobX 实行官的布置设计从团体上看是一样的，考虑到多了会计师这个角色的介入，所以特地在探长 猎取存贷比（divisor） 逻辑处空出一部份留给会计师让它自由发挥：
如许做，MobX 实行官也为了在实际行动中向他的警署主座证明该 A设计设计 确实具有“优越的扩展性”。
解开这层新增的会计师盘算逻辑 “面纱”，图示以下：
你会发明汗青老是惊人的相似，新增的会计师实行盘算使命的逻辑实在 探长 实行使命的逻辑是一样的，下图中我特地用 雷同的序号（差异的色彩外形）标示 出，序号所对应寄义以下：
- 设置成 正在执勤职员
- 最先实行使命
- 从视察员或会计师那儿猎取实行使命所需的数值，并同他们取得联络，
- 盘算使命实行完成后，更新与视察员 O1、视察员 O2 之间的联络；
此实行盘算使命的逻辑，假如不通知视察员的话，视察员还认为又来了一位“探长”上级。?
从布置图里我们可以看出会计师具有两面性；
- 对探长而言：会计师和视察员职位差不多，都属于“下级”，都须要将本身的信息实时反应给探长；
- 对视察员而言：会计师是属于 “上级”，具有部份相似探长实行使命权利，只不过其使命范例只能是 盘算范例的使命，实行使命终了以后，像探长那样和视察员相互关联起来，轻易下一次的运算；
自从有了会计师的介入，探长照样谁人探长，但他的下级已不是之前的下级了。借助 A设计使命的实行，会计师 C1 在上报盘算值的时刻，会因势利导地实行盘算使命，同时更新他的 ”关联网“。
2.2、 懒散的会计师
会计师有一个特征就是比较懒：就算视察员所视察到的值变动了，他们也不会马上从新盘算，而只在必要的时刻（比方当上级前来讨取时）才会从新盘算。
举个例子，当视察员 O1 发明张三的账户存款从本来的 3 变成 6 ：
bankUser.income = 6;这个时刻会触发一系列的 “荡漾”：
- ① 视察员 O1 先注册事宜，相当于到数据谍报室”上班打卡“，声明此次事宜由 视察员 O1 主导
- ② 示知其上级，也就是会计师 C1 ，说是张三存款（
income）有变动 - ③ 会计师 C1 获知音讯后，”慵懒地“调解本身的状况
- ④ 随后会计师 C1 继承往上级报告，示知本会计师的值有变动（注重，此时会计师只是通知上级本身的值有变动这一现实，但并没有实行盘算使命 ！）
- ⑤ 探长 R1 吸收到会计师的反应后，就向 MobX 实行官要求要实行使命！由于其下级会计师 C1 报告说值有变动，申明这个时刻应当要从新实行使命啦~
- ⑥ 实行官 MobX 调阅数据谍报室信息一看，发明如今视察员 O1 正在实行事宜，就让探长 R1 再等等，如今不是实行使命的最佳机遇，比及事宜终了再说。
- ⑦ 不一会儿视察员 O1 完成了本身的职责，”放工打卡“，在数据谍报室中注销事宜
- ⑧ 这个时刻，实行官 MobX 才让探长 R1 最先实行使命
将上面的笔墨转换成流程图，可以清楚看到各角色在此次“荡漾”中所起到的作用：
这里须要注重 3 点：
- 当视察员O1 报告张三存款有变动的时刻，会计师 C1 并没有马上从新盘算值哦，仅仅是变动本身的状况；
- 会计师示知上级（探长 R1）本身有值变动，探长要求实行使命，不过 MobX 实行官并没有许可他这么做，而是让他先守候一下，由于此时 视察员 O1 还在报告工作。等视察员 O1 工作报告终了，这个时刻才让探长实行使命。由于有可以有其他盘算组职员也正在相应当视察值的变动，事变一件一件来，不要焦急，这和 debounce 头脑一致，削减不必要的盘算。
- 只要在末了探长实行使命时 须要用到会计师的值的时刻，会计师才会去实行盘算操纵。这就是典范的惰性求值头脑。
会计师这类拖延到 只要被须要的时刻才举行盘算 的行动，有无让你回忆起学生时代寒假终了前一天猖獗补功课的场景？?
2.3、防止不必要的盘算
当实行官 MobX 拿着这份实行报告送达给你（警署最高主座），阅览终了：”不错，这套设计确实部份证明了你之前所言的可扩展性。但随着职员的引入，运转机构逐步巨大，怎样防止不必要的开支的呢？“
”主座您高瞻远瞩，这确实是一个题目。在有条有理的划定规矩下，平常职员的运作效力确实会打折扣。因而防止职员不必要的盘算开支，也是在我设计布置计划以内。正如您所见，上述设计中会计师的‘惰性’、捕快在事宜以后再举行使命等机制，都是基于优化机能所采用的步伐。“ 实行官 MobX 稍作停留，继承道，”为了更好地论述这套运转设计的机能优化机制，我来日诰日呈上一份报告，好让您得以周全相识。“
”Good Job！期待你的报告“。
那末，实行官 MobX 是依附什么机制削减开支的呢？且听下回分解。
（本节完，未完待续）
B. Source Code Time
本节部份，依然是就着上面的”故事“来说 MobX 中的源码。
先排列本文故事中新涌现的 会计师 角色与 MobX 源码观点映照关联：
| 故事人物 | MobX 源码 | 诠释 |
|---|---|---|
| 会计师 | computedvalue | 官方文档 – (@)computed 盘算值 |
探长、实行官等角色的映照关联，参考上一篇《
【用故事解读 MobX源码（一）】 autorun》
本文的重点内容就是 computedvalue 的部份源码（它在 autorun 等场景中的运用）
autorun（A 设计）的源码在上一节讲过，这里不再赘述。我们仅仅解说一下 computedValue 在 autorun 中的表现。
1、会计师，请最先你的扮演
在故事中我们讲到过，当探长向会计师索要盘算值的时刻，此时懒散的会计师为了 ”敷衍交差“，这时刻才最先盘算，其盘算的历程和探长实行的使命流程险些一致。
从源码角度去看一下个中的缘由。
当探长实行使命：
() => {
console.log('张三的贷款：', bankUser.debit, '；张三的存贷比: ' + divisor);
}使命中也触及 bankUser.debit 变量和 divisor 变量；个中在猎取 bankUser.debit 变量之时会让视察员 O2 触发 reportObserved要领，这个上一篇文章偏重讲过，此处就不细致展开了；而要求 divisor 数值的时刻，则会触发该值的 valueOf() 要领 —— 即挪用会计师（computedValue）的 valueOf() 要领。
为何挪用就触发 valueOf() 要领呢？请看下方的“知识点”备注?
======== 插播知识点 =========
任何原始值照样对象实在都包括
valueOf()或toString()要领，valueOf()会返回最适合该对象范例的原始值，toString()将该对象的原始值以字符串情势返回。
这两个要领平常是交由 JS 去隐式挪用，以满足差异的运算状况。比方在数值运算（如a + b）里会优先挪用valueOf()，而在字符串运算（如alert(c)）里，会优先挪用toString()要领
顺带附上两篇 参考文章
- js中 toString 和 valueOf 的区分？：知乎问答
- valueOf() vs. toString() in Javascript：SF 上的回复，异常详实地通知你实在行效果
======== 终了 ==========
一旦挪用挪用会计师的 valueOf 要领：
valueOf(): T {
return toPrimitive(this.get())
}实在就是挪用 this.get() 要领，我们瞧一眼源码；
1.1、 分量级盘算 照样 轻量级 盘算？
这里有个分叉点，根据 globalState.inBatch 决议究竟是启用 分量级盘算 照样 轻量级盘算：
- 当
globalState.inBatch值大于 0，申明会计师被上级征调（处于上级事宜中），比方此案例中，陷于 A 设计（autorun）的会计师，在上级探长 R1 须要查阅盘算值时刻，就会进入分量级盘算形式 - 当会计师无上级征调的时刻，
globalState.inBatch值为 0，就会进入轻量级盘算形式，简化盘算的逻辑。
但不管轻量级照样分量级盘算，都邑触及到挪用 computeValue() 要领来实行盘算使命。
挪用的时刻，假如是 分量级盘算 则 track 这个 bool 值为 true，不然track 值为 false。
盘算值有个属性，this.derivation 就是会计师要盘算数值时所根据的盘算表达式，也就是而我们定义会计师时所传入的匿名函数：
() => {
return bankUser.income / bankUser.debit;
}不管是 分量级盘算 形式照样 轻量级盘算 形式，终究都是会挪用该盘算表达式猎取盘算值。
分量级盘算 形式和 轻量级盘算 形式二者的差异只是在于前者在实行该盘算表达式之前会设置许多环境，后者直接就按这个表达式盘算数值返回。
在上述的故事中，由于探长 R1 人物的存在，会计师会实行 分量级盘算 形式，接下来的源码剖析也走这条分支线路。（ 轻量级盘算 形式的状况当作课后思索题）。
1.2、像探长进修
在 分量级盘算的时刻，computeValue(true) 就会走和 探长 操纵形式一样 trackDerivedFunction 步骤。没错，探长和会计师挪用的就是同一个要领，所以他们在实行使命的时刻，行动陈迹是一样的，没缺点。
假如遗忘
trackDerivedFunction要领内容，请检察 《【用故事解读 MobX源码（一）】 autorun》的 ”2.2.2、trackDerivedFunction“ 部份
只不过会计师只能实行盘算类的使命（纯函数）罢了，探长可以实行恣意范例的使命。
和探长一样，会计师实行盘算使命终了以后挪用 bindDependencies 将绑定 视察员 O1 和 视察员 O2 ；而在实行盘算以后，会计师会挪用 propagateChangeConfirmed 要领，变动本身和上级 探长 的状况 —— 这申明，对探长而言，会计师就相当于 视察员的角色，在探长实行使命终了后像视察员一样须要上报本身的盘算值，并和 探长 取得联络；
这么看会计师还真 ”墙头草，两边倒”。
至此，会计师这个角色以较低的本钱就可以完美地整合进实行官 MobX 所布置的 A 鸠合布置设计中。??
2、 相应视察值的变化
一旦张三的账户存款（income）发生变化，将会触发 MobX 所供应的 reportChanged 要领：
public reportChanged() {
startBatch()
propagateChanged(this)
endBatch()
}注重这里的
startBatch和
endBatch要领，申明视察员 O1 提议事宜了。
2.1、通报变化的信息
我们晓得（不晓得的请浏览上一篇文章）该 reportChanged() 要领中的 propagateChanged() 会触发上级的 onBecomeStale() 要领。
视察员 O1 此时的上级是 会计师 C1，其所定义的 onBecomeStale 以下：
onBecomeStale() {
propagateMaybeChanged(this)
}看一下 propagateMaybeChanged(this) 源码，也比较简朴，重要做了两件事变，① 会计师会调解本身的状况； ②然后触发其上级（探长 R1）的 onBecomeStale() 要领。
可见视察员 01 会引起会计师 C1 的相应，而会计师会引起探长 R1 的相应，这类相应“荡漾”就是经由过程下级触发上级的 onBecomeStale 要领构成的连锁反应。
差异上级（比方会计师和探长）的
onBecomeStale定义差异。
探长的这个 onBecomeStale 要领在上一篇文章的 “3、相应视察值的变化 – propagateChanged” 中我们讲过，探长将要求 MobX 要求从新实行一遍 A 设计设计。
然则，MobX 拒绝了此次要求，让他再守候一下。??
这是由于在 runReactions 要领中：
if (globalState.inBatch > 0 || globalState.isRunningReactions) return由于此时 inBatch 是 1（由于视察员实行了 startBatch()），所以会直接 return 掉。
直到视察员实行 endBatch() 的时刻，除了会终了本次的上报事宜，同时实行官 MobX 会从新实行 runReactions 要领，让久等的探长去实行使命：
探长在实行使命的时刻，就会打印张三的贷款（debit）、存贷比（divisor）了。
2.2、虽然懒，然则懒得有技能
综上，当张三存款（income）变动，就可以让 A 设计（autorun）自动运转，探长会打印张三的贷款（debit）、存贷比（divisor）。
这里须要说起一下，关于会计师从新盘算的机遇，是在探长实行 shouldCompute 的时刻，探长发明会计师值 陈腐 了，就让会计师从新盘算：
看看这里，对盘算值而言，isComputedValue()（假如是盘算值）返回 true，就会实行 obj.get() 要领，这个要领适才刚讲过，会让会计师实行 分量型盘算操纵，更新本身的盘算值。
所以，此次盘算机遇并不是比及探长实行使命时（真正用到该值）的时刻才让其从新盘算，和第一次 autorun 的机遇不一致。
预计这是 MobX 考虑到会计师的值一定须要更新的（已肯定要被探长 R1 用到），另有可以会被其他上级援用，既然早晚要更新的，那就尽量将更新前置，如许在团体上能降低本钱。
更新完以后，在探长实行使命的时刻，会计师报告本身是最新的值了，就不必再从新盘算一遍。
虽然懒，然则懒得有技能。
至此，有关会计师的源码解读已差不多，后续有想到的再补充。
3、其他申明
本文为了轻易申明，所以零丁运用 mobx.computed 要领定义盘算值，日常平凡运用中更多则是直接运用在 对象中属性 上，运用 get 语法：
var bankUser = mobx.observable({
income: 3,
debit: 2,
get divisor() {
return this.income / this.debit;
}
});这仅仅是写法上不一样，源码剖析的思绪是一致的。
4、小测试
4.1、测试1
题目：当我们变动张三贷款数额 bankUser.debit = 4; 时，请从源码角度解答 MobX 的实行流程是怎样的？
参考答案提醒：
reportChanged()
=> propagateChanged()
=> propagateMaybeChanged()
=> runReaction()
=> track()
=> get()
=> computeValue()
=> bindDependencies()4.2、测试2
题目：假如不存在 autorun （即没有探长介入，唯一视察员和会计师），此时仅转变张三存款数值：
var bankUser = mobx.observable({
income: 3,
debit: 2
});
var divisor = mobx.computed(() => {
return bankUser.income / bankUser.debit;
});
bankUser.income = 6; // 叨教此时的实行状况是什么样的？
console.log('张三的存贷比：', divisor)
叨教会计师会从新盘算数值么？此时这套体系的实行状况又会是怎样的呢？
参考答案提醒：会计师此时实行 轻量级盘算形式。
5、小结
此篇文章解说 MobX 中 盘算值 （computedValue） 的观点，类比故事中的会计师角色。总结一下 盘算值 （computedValue）的特征：
- 盘算值是基于现有状况或其他盘算值衍生出的数值，平常是经由过程 纯函数 的体式格局衍生而得。
- 一旦视察值变动以后，盘算值是可以从新实行盘算，不过并不是马上实行，而是 惰性 的 ———— 只要在必要的时刻才会实行盘算。
- 对视察值而言，盘算值和
autorun（或reaction） 很像，之所以相似是在 实行使命 时都触及到挪用trackDerivedFunction要领；而对autorun（或reaction）而言，盘算值和视察值很相，都是数据供应者。
正如 官方文档 而言，盘算值是高度优化过的，所以尽量运用他们。
下一篇文章将讨论 MobX 中与 autorun 和 computed 相干的盘算机能优化的机制，看看 MobX 怎样均衡庞杂场景下状况治理时的效力和机能。
下面的是我的民众号二维码图片，迎接关注，实时猎取最新技术文章。
