mobx源码解读—— autorun 与 observable

第一次阅读源码，可能有理解的不太正确的地方希望大佬们能帮我纠正。开始看的是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_ = false
   
    if (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<T>(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_ // 默认为0

    let 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 = i0

    derivation.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<any>
    } = 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在文档中是这样介绍的。
下载 1.jpeg
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<T = any>(value?: T, options?: CreateObservableOptions): IObservableValue<T> {
    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()
}
ObservableValue

public set(newValue: T) {
    const oldValue = 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<T>,
    public name = "ObservableValue@" + getNextId(),
    notifySpy = true,
    private equals: IEqualsComparer<any> = comparer.default
) {
    ...
    this.value = enhancer(value, undefined, name)
}

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

function getEnhancerFromOptions(options: CreateObservableOptions): IEnhancer<any> {
    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<T = any>(
        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<A extends Object, B extends Object>(
    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<any> = 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<any>): IObservableDecorator {
    const decorator = createPropDecorator(
        true,
        (
            target: any,
            propertyName: PropertyKey,
            descriptor: BabelDescriptor | undefined,
            _decoratorTarget,
            decoratorArgs: any[]
        ) => {

            const initialValue = 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<any> = this.defaultEnhancer
) {
    const { target } = this
    if (hasInterceptors(this)) {
        // 拦截处理
        const change = interceptChange<IObjectWillChange>(this, {
            object: this.proxy || target,
            name: propName,
            type: "add",
            newValue
        })
        if (!change) return // 拦截器返回空的时候不需要重新忽略此次修改。
        newValue = (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<IObjectWillChange>(this, {
            type: "update",
            object: this.proxy || instance,
            name: key,
            newValue
        })
        if (!change) return
        newValue = (change as any).newValue
    }
    newValue = (observable as any).prepareNewValue(newValue)
    if (newValue !== globalState.UNCHANGED) {
        (observable as ObservableValue<any>).setNewValue(newValue)
    }
}


// observable.prepareNewValue和observable.setNewValue方法
private prepareNewValue(newValue): T | IUNCHANGED {
    if (hasInterceptors(this)) {
        const change = interceptChange<IValueWillChange<T>>(this, {
            object: this,
            type: "update",
            newValue
        })
        if (!change) return globalState.UNCHANGED
        newValue = 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

现在基本可以理解observable是autoruan之间的关系了。