第一次阅读源码，可能有理解的不太正确的地方希望大佬们能帮我纠正。开始看的是6，后来看到observable发现和5的差距还是有一点的，所以在所以“autorun”的部分可能会有6的源码，但差距并不大。

1.mobx的基本概念 Observable 被观察者
Observer 观察
Reaction 响应

var student = mobx.observable({ name: '张三', }); mobx.autorun(() => { console.log('张三的名字:', student.name); });

2.mobx的原理 1.在响应式函数中（如以上autorun中通常会访问一个或多个observable对象），

• 1）autorun首先创建一个Reaction类型的实例对象reaction，通过参数track一个响应式函数的回调函数。
• 2）然后执行reaction.schedule_方法，执行回调函数，回调函数中调用被观察者observable.get方法，触发reportObserved方法。
• 3）reportObserved方法中会将observavle对象收集到globalState.trackingDerivation.newObserving_队列中（globalState.trackingDerivation此时等同于reaction对象）
• 4）处理reaction和observable的依赖关系，遍历reaction.newObserving_属性，在newObserving_队列中的每一个observable.observers_属性中添加当前reaction对象。

2.被观察者observable的value发生变化，调用observable对象set方法，触发propagateChange方法。propagateChange方法中，遍历observable.observers_属性依次执行reaction.onBecomeStale方法，再次将以上的2）3）4）执行一遍。
3.源码解读–autorun 以下为删减后的代码
3.1 autorun

export function autorun( view: (r: IReactionPublic) => any,// autoruan函数的回调函数 opts: IAutorunOptions = EMPTY_OBJECT ): IReactionDisposer {const name: string = "Autorun" const runSync = !opts.scheduler && !opts.delay// 首先创建一个Reaction类型的对象 主要功能是用来控制任务的执行 let reaction = new Reaction( name, function (this: Reaction) { this.track(reactionRunner) }, opts.onError, opts.requiresObservable )function reactionRunner() { view(reaction) } // view即autorun函数的回调reaction.schedule_() // 立即执行一次部署return reaction.getDisposer_() // 用于在执行期间清理 autorun }

从上边的源码可以看出autorun主要做了一下三个动作

• 1）创建一个Reaction类型的对象 主要功能是用来控制任务的执行
• 2）将view即auto的回调函数，分配给reaction.track
• 3）立即执行一次部署 ，此时你应该理解文档中所说的“当使用autorun时，所提供的函数总是立即被触发”

3.2 reaction.schedule_的源码

schedule_() { if (!this.isScheduled_) { this.isScheduled_ = true globalState.pendingReactions.push(this) // 当前的reaction对象入列 runReactions() // 队列中的所有reaction对象执行runReaction_方法 } }function runReactionsHelper() { let remainingReactions = allReactions.splice(0) for (let i = 0, l = remainingReactions.length; i < l; i++) remainingReactions[i].runReaction_() }

schedule_方法做了两件事

• 1）当前的reaction对象入列
• 2）队列中的所有reaction对象执行runReaction_方法

3.3 runReaction_源码

runReaction_() { startBatch() // 开启一层事务 this.isScheduled_ = falseif (shouldCompute(this)) {// derivation.dependenciesState_默认为-1 (未跟踪) this.onInvalidate_() } endBatch() // 关闭一层事务 startBatch和endBatch总是成对出现 }

翻看上边的代码可以发现onInvalidate_是在初始化Reaction时传入构造函数的，实际上时调用了reaction.track方法

track(fn: () => void) { startBatch() ... const result = trackDerivedFunction(this, fn, undefined) // 执行任务 更新依赖 ... endBatch() }

3.4 track方法主要是调用了trackDerivedFunction

export function trackDerivedFunction(derivation: IDerivation, f: () => T, context: any) { ... globalState.trackingDerivation = derivation// 将derivation（此处等同于reaction对象）挂载到全局变量 这样其他成员也可访问此derivation ... // 执行reaction传递的的回调方法，翻看代码可以看出执行的是autoran函数的回调方法 // 回调中一般会调用一或多个observable对象，触发observable.get方法，再触发reportObserved方法 let result = f.call(context) ... globalState.trackingDerivation = prevTracking bindDependencies(derivation) // 更新observable和raction的依赖关系 return result }

执行因为autorun回调用到了student.name变量，这里的"."其实就是get操作；一旦设计到get操作，监督这个name的属性的观察员就会执行reportObserved方法（后边介绍Oobservable时候会重点介绍这里）。
3.5 reportObserved源码

export function reportObserved(observable: IObservable): boolean { ... const derivation = globalState.trackingDerivation if (derivation !== null) {if (derivation.runId_ !== observable.lastAccessedBy_) {// 更被观察者的lastAccessedBy_属性（事务id），这个是为了避免重复操作 observable.lastAccessedBy_ = derivation.runId_ // 更新derivation（此处为reaction）的newObserving属性，将被观察者加入该队列中 // 后续derivation和observable更新依赖关系就靠这个属性 derivation.newObserving_![derivation.unboundDepsCount_++] = observable ... } return true } else if (observable.observers_.size === 0 && globalState.inBatch > 0) { queueForUnobservation(observable) }return false }

上边的代码，我们主要关注影响derivation的操作

• 1）更新observable的lastAccessedBy_属性（事务id），这个是为了避免重复操作。
• 2）更新derivation（此处为reaction）的newObserving属性，将observable加入该队列中，后续derivation和observable更新依赖关系就靠这个属性

随后autorun的任务执行完成后，derivation就开始着手更新和被观察者observable的依赖关系
3.6 bindDependencies源码

function bindDependencies(derivation: IDerivation) { const prevObserving = derivation.observing_// derivation.newObserving_为derivation依赖的observable对象的队列 const observing = (derivation.observing_ = derivation.newObserving_!) let lowestNewObservingDerivationState = IDerivationState_.UP_TO_DATE_ // 默认为0let i0 = 0, l = derivation.unboundDepsCount_ for (let i = 0; i < l; i++) {/** * 以下是一个去重的过程 * observable.diffValue_默认是0 * 循环时候置为1，因为observing为Observable类型的对象数组，所以不同位置上相同的值的diffValue_都会变成1 * 在遍历到重复项后就不会进入下边的判断，i0就不会++ * 遍历到非重复项（diffValue_为0的项），则直接将此项填充到i0对应的位置上 * 这样数组循环完毕，i0即非重复项的数量，observing.length = i0即删除掉了多余项 */const dep = observing[i] if (dep.diffValue_ === 0) { dep.diffValue_ = 1 if (i0 !== i) observing[i0] = dep i0++ } } observing.length = i0derivation.newObserving_ = null // newObserving 置空/** * prevObserving中和observing中存在的均为observable对象 * 此时如果在上边的循环完成后 observing存在的observable对象的diffValue_均为1 * 在prevObserving队列如果是diffValue_仍然为0，表示当前derivation已经不依赖此observable对象 */ l = prevObserving.length while (l--) { const dep = prevObserving[l]; if (dep.diffValue_ === 0) { // 将当前derivation已不再依赖此observable对象，将其从observable.observers_中的deleted掉 removeObserver(dep, derivation) } dep.diffValue_ = 0 // 将prevObserving队列中的observable的diffValue_均置为0 }while (i0--) { const dep = observing[i0]// observing仍然为1的说明此observable对象不在prevObserving队列中 if (dep.diffValue_ === 1) { dep.diffValue_ = 0 // 在observable.observers_中添加当前的derivation对象 addObserver(dep, derivation) } } // 通过以上的3次循环，将derivation.observing更新为最新的依赖（并去重）， // 并在已经不依赖的observable对象的observers_中delete当前的derivation对象 // 在新建立起的依赖的observable对象的observers_中add当前的derivation对象 }

响应被观察者observable对象的value发生变化
上边提及，一旦observable的value发生变化，就会触发observable.get方法，然后触发propagateChange方法，propageateChange源码如下

export function propagateChanged(observable: IObservable) { ... observable.observers_.forEach(d => { ... d.onBecomeStale_() ... })}

observable.observers_存储的是，与observable对象有依赖关系的derivation对象，在propagateChanged方法中，遍历observers_执行derivation对象的onBecomeStale_方法，我们来看一下onBecomeStale_的源码
3.7 onBecomeStale_的源码

onBecomeStale_() { this.schedule_() }

this.schedule_是不是很熟悉，翻一下上边的代码，发现是在autorun函数中创建reaction对像的时候调用了reaction.schedule_()。所以这下明白propagateChanged调用onBecomeStale_是让reaction再次执行一次之前的部署操作（也就是执行autorun的回调，处理依赖关系）；
4.接下来开始看observable（被观察者）部分 4.1 observable的别名createObservable

export const observable: IObservableFactory & IObservableFactories & { enhancer: IEnhancer } = createObservable as any // observable的别名createObservable// 将observableFactories的属性复制一份给observable Object.keys(observableFactories).forEach(name => (observable[name] = observableFactories[name]))

• 1）首先 observable 是函数函数同 createObservable。
• 2）observable复制了observableFactories的属性。

function createObservable(v: any, arg2?: any, arg3?: any) { // @observable someProp; if (typeof arguments[1] === "string" || typeof arguments[1] === "symbol") { return deepDecorator.apply(null, arguments as any) }// it is an observable already, done if (isObservable(v)) return v// something that can be converted and mutated? const res = isPlainObject(v) ? observable.object(v, arg2, arg3) : Array.isArray(v) ? observable.array(v, arg2) : isES6Map(v) ? observable.map(v, arg2) : isES6Set(v) ? observable.set(v, arg2) : v// this value could be converted to a new observable data structure, return it if (res !== v) return res }

createObservable方法起到了转发的作用，将传入的对象转发给具体的转换函数。
简单分析一下具体的转化模式

• 1）arguments[1] === “string” || typeof arguments[1] === “symbol” 采用的是装饰器@observable，装饰器的参数（target,prop,descriptor）其中arguments[1] 也就是prop为属性名称为字符串类型
• 2）isObservable(v) 已经转换为观察值了不需要再转换
• 3）observable.object、observable.array、observable.map、observable.set根据传入参数的类型分别调用具体的转换方法
• 4）针对原始类型提示用户建议使用observable.box方法

4.2 observable.box
observable.box在文档中是这样介绍的。

文章图片

observable.box把普通的值转换成可观察的值，如下例。

const name = observable.box("张三"); console.log(name.get()); // 输出 '张三'name.observe(function(change) { console.log(change.oldValue, "->", change.newValue); }); name.set("李四"); // 输出 '张三 -> 李四'

observable.box retrun 一个ObservableValue类型的对像。

box(value?: T, options?: CreateObservableOptions): IObservableValue { const o = asCreateObservableOptions(options) // 格式化入参 // ObservableValue的拥有方法get set observe intercept... return new ObservableValue(value, getEnhancerFromOptions(o), o.name, true, o.equals) },

案例中的“name.set(“李四”)”，就是调用了ObservableValue的set方法。一会再介绍ObservableValue的时候会重点说下。
4.3 核心类 ObservableValue
ObservableValue 继承了 Atom原子类，先梳理一下Atom和ObservableValue和有什么主要能力。

Atom public reportObserved(): boolean { return reportObserved(this) }public reportChanged() { startBatch() propagateChanged(this) endBatch() } ObservableValuepublic set(newValue: T) { const oldValue = https://www.it610.com/article/this.value newValue = this.prepareNewValue(newValue) as any if (newValue !== globalState.UNCHANGED) { const oldValue = this.value this.value = newValue this.reportChanged() ... } } public get(): T { this.reportObserved() return this.dehanceValue(this.value) }intercept observe

其中reportObserved、propagateChanged在梳理autorun的时候介绍过。

• 1）reportObserved：调用观察值是用于更新derivation和observable的依赖关系。
• 2）propagateChanged：观察值改变时，observable对象的observers中存储的derivation，执行onBecomeStale方法，重新执行部署操作。
• 3）Observablevalue的set 修改value同时调用Atom的reportChanged方法触发propagateChanged。
• 4）Observablevalue的get 获取value值的同时调用Atom的reportObserved方法触发reportObserved。

所以上边案例中“name.set(“李四”); ”会触发propagateChanged方法，会执行有依赖关系的 derivation 重新执行部署操作
接下来看一下new ObservableValue的时候干了什么？

constructor( value: T, public enhancer: IEnhancer, public name = "ObservableValue@" + getNextId(), notifySpy = true, private equals: IEqualsComparer = comparer.default ) { ... this.value = https://www.it610.com/article/enhancer(value, undefined, name) }

ObservableValue的构造函数中调用enhancer对value进行了处理，enhancer是通过参数是创建ObservableValue类型对象是传递的参数getEnhancerFromOptions(o)。getEnhancerFromOptions默认返回的是deepEnhancer。

function getEnhancerFromOptions(options: CreateObservableOptions): IEnhancer { return options.defaultDecorator ? options.defaultDecorator.enhancer : options.deep === false ? referenceEnhancer : deepEnhancer }

gdeepEnhancer主要内容如下。

export function deepEnhancer(v, _, name) { if (isObservable(v)) return v if (Array.isArray(v)) return observable.array(v, { name }) if (isPlainObject(v)) return observable.object(v, undefined, { name }) if (isES6Map(v)) return observable.map(v, { name }) if (isES6Set(v)) return observable.set(v, { name }) return v }

这个deepEnhancer是不是看上去有点眼熟，往上翻一下可以看出他和createObservable 函数十分相似，起到了转发的作用，将传入的对象转发给具体的转换函数。所以要理解observable我门主要就是要了解这些转换函数。接下来我们主要分析observable.object。
4.4 observable.object

object( props: T, decorators?: { [K in keyof T]: Function }, options?: CreateObservableOptions ): T & IObservableObject {const o = asCreateObservableOptions(options) if (o.proxy === false) { return extendObservable({}, props, decorators, o) as any } else { const defaultDecorator = getDefaultDecoratorFromObjectOptions(o) const base = extendObservable({}, undefined, undefined, o) as any const proxy = createDynamicObservableObject(base) extendObservableObjectWithProperties(proxy, props, decorators, defaultDecorator) return proxy } }

o.proxy为true的时候只是多了一步Proxy，其余的工作基本相似，所以主要关注extendObservable方法就可以了。
extendObservable中调主要用了getDefaultDecoratorFromObjectOptions、asObservableObject、extendObservableObjectWithProperties方法。因为getDefaultDecoratorFromObjectOptions与extendObservableObjectWithProperties有关联，所以先来看asObservableObject，再看另外两个方法。
4.5 extendObservable

export function extendObservable( target: A, properties?: B, decorators?: { [K in keyof B]?: Function }, options?: CreateObservableOptions ): A & B { options = asCreateObservableOptions(options) const defaultDecorator = getDefaultDecoratorFromObjectOptions(options) // 默认返回deepDecorator装饰器 asObservableObject(target, options.name, defaultDecorator.enhancer) // make sure object is observable, even without initial props if (properties) extendObservableObjectWithProperties(target, properties, decorators, defaultDecorator) return target as any }

4.6 asObservableObject
asObservableObject方法：

• 1）创建一个对象amd为ObservableObjectAdministration类的实例。
• 1）amd赋值给target[$mobx]
• 2）返回amd；

export function asObservableObject( target: any, name: PropertyKey = "", defaultEnhancer: IEnhancer = deepEnhancer ): ObservableObjectAdministration { const adm = new ObservableObjectAdministration( target, new Map(), stringifyKey(name), defaultEnhancer ) addHiddenProp(target, $mobx, adm) return adm }

4.7 extendObservableObjectWithProperties
extendObservableObjectWithProperties：循环原始对象，对每一个属性值经过都decorator函数处理（decorators方法即通过getDefaultDecoratorFromObjectOptions方法获取的默认为deepDecorator，所以一回直接看deepDecorator）

export function extendObservableObjectWithProperties( target, properties, // 原对象 decorators, defaultDecorator ) { startBatch() const keys = ownKeys(properties)// 循环原对象 for (const key of keys) { const descriptor = Object.getOwnPropertyDescriptor(properties, key)! const decorator = decorators && key in decorators ? decorators[key] : descriptor.get ? computedDecorator : defaultDecorator const resultDescriptor = decorator!(target, key, descriptor, true) // 经过装饰器处理 if ( resultDescriptor // otherwise, assume already applied, due to `applyToInstance` ) Object.defineProperty(target, key, resultDescriptor) }endBatch() }

4.8 decorator
decorator默认为deepDecorator，我们来看一下它都干了什么。

export function createDecoratorForEnhancer(enhancer: IEnhancer): IObservableDecorator { const decorator = createPropDecorator( true, ( target: any, propertyName: PropertyKey, descriptor: BabelDescriptor | undefined, _decoratorTarget, decoratorArgs: any[] ) => {const initialValue = https://www.it610.com/article/descriptor ? descriptor.initializer ? descriptor.initializer.call(target) : descriptor.value : undefined // 调用target[$mobx].addObservableProp方法 asObservableObject(target).addObservableProp(propertyName, initialValue, enhancer) } ) const res: any = decorator res.enhancer = enhancer return res }

4.9 addObservableProp方法
decorator中调用了target[$mobx].addObservableProp方法

addObservableProp( propName: PropertyKey, newValue, enhancer: IEnhancer = this.defaultEnhancer ) { const { target } = this if (hasInterceptors(this)) { // 拦截处理 const change = interceptChange(this, { object: this.proxy || target, name: propName, type: "add", newValue }) if (!change) return // 拦截器返回空的时候不需要重新忽略此次修改。 newValue = https://www.it610.com/article/(change as any).newValue } // newValue转换成ObservableValue类型 const observable = new ObservableValue( newValue, enhancer, `${this.name}.${stringifyKey(propName)}`, false ) this.values.set(propName, observable) // 存储 newValue = (observable as any).value // generateObservablePropConfig方法返回以下描述符 // { ..., get() { return this[$mobx].read(propName)}, set(v) { this[$mobx].write(propName, v) } } Object.defineProperty(target, propName, generateObservablePropConfig(propName)) // target生成propName属性 const notify = hasListeners(this) const change = { type:"add", object: this.proxy || this.target, name: propName, newValue } this.keysAtom.reportChanged() // this.keysAtom即Atom的实例 }

addObservableProp方法

• 1）调用ObservableValue类将newValue转换为可观察值（还记不记得上边ObservableValue调用通过enhancer调用了observable.object方法吗。现在可以看出observable.object方法中在循环对象的属性时又调用了ObservableValue。通过这种递归的方式将对象的属性转换为可观察值）
• 2）将属性key和observable存入target[$mobx].values中
• 3）将原对象属性值添加到target，并通过描述符中get和set都是直接调用this[mobx].read和this[mobx].write方法。
• 4）调用原子类Atom的reportChanged，让依赖此observable对象的derivation重新执行部署操作。

综上extendObservableObjectWithProperties作用即循环原始对象，执行以上4步，实现了将原始对象的属性代理到target上，并将值转换到可观察值，存储在target[$mobx].values中。
4.10 read和write

read(key: PropertyKey) { return this.values.get(key)!.get() } // observable.get方法 public get(): T { this.reportObserved() // Atom下的reportObserved return this.dehanceValue(this.value) }

read方法会根据属性名称从this.values中查找，获取到对应的observable对象再调用observable.get方法触发reportObserved

write(key: PropertyKey, newValue) { const instance = this.target const observable = this.values.get(key) // intercept if (hasInterceptors(this)) { const change = interceptChange(this, { type: "update", object: this.proxy || instance, name: key, newValue }) if (!change) return newValue = https://www.it610.com/article/(change as any).newValue } newValue = (observable as any).prepareNewValue(newValue) if (newValue !== globalState.UNCHANGED) { (observable as ObservableValue).setNewValue(newValue) } }// observable.prepareNewValue和observable.setNewValue方法 private prepareNewValue(newValue): T | IUNCHANGED { if (hasInterceptors(this)) { const change = interceptChange>(this, { object: this, type: "update", newValue }) if (!change) return globalState.UNCHANGED newValue = https://www.it610.com/article/change.newValue } // apply modifier newValue = this.enhancer(newValue, this.value, this.name) // 调用enhancer转换为可观察模式 return this.equals(this.value, newValue) ? globalState.UNCHANGED : newValue }setNewValue(newValue: T) { const oldValue = this.value this.value = newValue this.reportChanged() if (hasListeners(this)) { notifyListeners(this, { type:"update", object: this, newValue, oldValue }) } }

write方法

• 1）调用observable.prepareNewValue方法将新的value进行转换
• 2）调用observable.setNewValue重新修改值
• 3）触发reportChanged方法。

4.11 综上总结

var student = mobx.observable({ name: '张三', });

mobx通过observable方法用target代理了传入的对象，赋值给student。
因此student的结构应该如下

文章图片

在调用student.name时候触发会调用get=>read=>observableValue.get=>reportObserved
修改的时候 set=>write=>observableValue.setNewValue=>reportChanged
【mobx源码解读——|mobx源码解读—— autorun 与 observable】现在基本可以理解observable是autoruan之间的关系了。

推荐阅读

• 

  女性总是小腹坠胀会是什么原因造成的呢
• 

  软件 成本分析方法,软件成本估算模型
• 

  广州市民政局广州市财政局关于减免殡葬基本服务费用有关问题的通知
• 

  云顶之弈重装枪手阵容怎么玩 重装枪手运营思路详解
• 

  大蒜什么样的才是新鲜的 大蒜什么样的好吃
• 

  苹果怎么下载应用宝，苹果机怎样安装应用宝
• 

  win7控制面板：更改文件关联及打开方式
• 

  2018-10-31|2018-10-31 二阶段day3
• 

  5g时代对电商有什么影响 5g直播电商赚什么收益，5g投资最大是什么
• 

  警察简笔画画法警察简笔画怎么画
• 

  长三角研究院是公司吗
• 

  打完新冠疫苗不良反应有哪些
• 

  朝鲜族的最具代表性舞蹈 长鼓舞是哪个民族的舞蹈
• 

  程序员接私活靠谱吗，哪些平台程序员可以接私活项目的要比较靠谱
• 

  核酸检测|四川达州宣汉：9月27日后从山东返人员须接受核酸检测
• 

  广州到长沙高铁票 广州到长沙高铁
• 

  古摄影摄影基地 古摄影工作室
• 

  思维导图与英语学习
• 

  css如何实现三角形，箭头，提示框，来一探究竟吧
• 

  惊喜|小米MIX4预计八月发布？有何惊喜？抢先了解！

• 解读《摩根集团》（1）
• 赋能|赋能|学习关关公益天赋解读~
• Android事件传递源码分析
• Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
• [源码解析]|[源码解析] NVIDIA HugeCTR，GPU版本参数服务器---(3)
• ffmpeg源码分析01（结构体）
• Java程序员阅读源码的小技巧，原来大牛都是这样读的，赶紧看看！
• 活的教导7:两个阶段
• Vue源码分析—响应式原理(二)
• cocosbcx白皮书解读（一）|cocosbcx白皮书解读（一）| 区块链如何统一开发者、发行商、用户之间的利益