离职了，把 2019 年在公司写的文档 copy 出来。年头有点久，可能写的不太对，也不是很想改了~
注：本文档对应 mobx 版本为 4.15.4、mobx-vue 版本为 2.0.10

背景

MobX 规定：在将 MobX 配置为需要通过动作来更改状态时，必须使用 action。参考 MobX 中文网

但是机智的你可能会发现加不加 @action，代码都能用，也不会有啥问题，有时候需要 bind 一下 this，就写个@action.bound，要不就干脆不写了， 但是 @action 不是像 VueX 里面 getter 之类的在非严格模式下那种可写可不写，它不仅能够结合开发者工具提供调试信息，还能提供事务的特性。

事务特性

啥是事务，事务简单概括就是：所有操作必须成功完成，否则在每个操作中所作的所有更改都会被撤消。

单线程 js 的事务特性。。。其实我看源码之前，我猜也就是个同步异步，get set之类的操作，其实也差不多吧，但是要稍微复杂一点。

具体的表现就是，派发更新的过程会在函数执行中进行还是在函数结束后进行。Vue 的 demo 如下（别问为啥 Vue 还要用 MobX，问就是公司传统）：

    @observable value: number = 1
    constructor(public view: TransactionsVM) {
        observe(this, 'value', () => {
            console.log('observe')
        })

        autorun(() => {
            if (this.value) {
                console.log('value-autorun')
            }
        })
    }

    addOne() {
        console.log('自加 1-')
        this.value++
        console.log('自加 1+')
    }

    @action
    addTwo() {
        console.log('自加 2-')
        this.value += 2
        console.log('自加 2+')
    }

执行顺序如下：

• 自加 1 的执行顺序：自加 1- => value-autorun => observe => 自加 1+
• 自加 2 的执行顺序：自加 2- => observe => 自加 2+ => value-autorun

很不起眼，但是这细微的执行顺序差异很可能在项目里要了你的老命！

源码追踪

@action的源码

@action 其实就是一个装饰器而已

1. 装饰器用法的 action(arg1, arg2?, arg3?, arg4?): any
   1. 四个入参： 类的原型、@action 修饰的函数名、 一个 Object.defineProperty 的 descriptor（ value 为 @action 修饰函数）、undefined
   2. 返回值：return namedActionDecorator(arg2).apply(null, arguments as any)
2. namedActionDecorator(name: string)
   1. 一个入参：函数名
   2. 返回值：return function(target, prop, descriptor: BabelDescriptor), 这三个参数，就是 action 的前三个参数，函数里面进一步处理了 descriptor 的返回值，具体如下

   {
       value: createAction(name, descriptor.value), // descriptor
       enumerable: false,
       configurable: true,
       writable: true
   }
   

3. createAction(actionName: string, fn: Function, ref?: Object): Function & IAction

       const res = function() {
           return executeAction(actionName, fn, ref || this, arguments)
       }
       ;(res as any).isMobxAction = true
       return res as any
   

4. executeAction(actionName: string, fn: Function, scope?: any, args?: IArguments)，这里只做了三件事，首先是_startAction，接着是执行函数，最后_endAction

       runinfo = _startAction(actionName, scope, args)
       return fn.apply(scope, args)
       _endAction(runInfo)
   

5. _startAction
   里面做了很多东西，return 了一个 runinfo 作为后续_endAction的入参

       const prevDerivation = untrackedStart()
       startBatch() // 就一行代码 => globalState.inBatch++
       const prevAllowStateChanges = allowStateChangesStart(true)
       const prevAllowStateReads = allowStateReadsStart(true)
       const runInfo = {
           prevDerivation,
           prevAllowStateChanges,
           prevAllowStateReads,
           notifySpy,
           startTime,
           actionId: nextActionId++,
           parentActionId: currentActionId
       }
       currentActionId = runInfo.actionId
       return runInfo
   

6. _endAction
   里面也做了很多东西

       allowStateChangesEnd(runInfo.prevAllowStateChanges)
       allowStateReadsEnd(runInfo.prevAllowStateReads)
       endBatch()
       untrackedEnd(runInfo.prevDerivation)
   

   其中 endBatch：

       if (--globalState.inBatch === 0) {
           // 核心逻辑
           runReactions()
           // 被 removeObserver 的 observable
           const list = globalState.pendingUnobservations
           for (let i = 0; i < list.length; i++) {
               const observable = list[i]
               observable.isPendingUnobservation = false
               if (observable.observers.size === 0) {
                   if (observable.isBeingObserved) {
                       observable.isBeingObserved = false
                       observable.onBecomeUnobserved()
                   }
                   if (observable instanceof ComputedValue) {
                       observable.suspend()
                   }
               }
           }
           globalState.pendingUnobservations = []
       }
   

   其中 runReactions

       if (globalState.inBatch > 0 || globalState.isRunningReactions) return
       reactionScheduler(runReactionsHelper) // reactionScheduler就是一个 f => f()，所以就是执行 runReactionsHelper
   

   其中 runReactionsHelper，大致就是把 pendingReactions 一个一个都执行销毁了，这个东西是 Reaction.schedule的时候一个一个插入的

       globalState.isRunningReactions = true
       const allReactions = globalState.pendingReactions
       let iterations = 0
   
       while (allReactions.length > 0) {
           if (++iterations === MAX_REACTION_ITERATIONS) {
               console.error(
                   `Reaction doesn't converge to a stable state after ${MAX_REACTION_ITERATIONS} iterations.` +
                       ` Probably there is a cycle in the reactive function: ${allReactions[0]}`
               )
               allReactions.splice(0) // clear reactions
           }
           let remainingReactions = allReactions.splice(0)
           for (let i = 0, l = remainingReactions.length; i < l; i++)
               remainingReactions[i].runReaction()
       }
       globalState.isRunningReactions = false
   

引申一下pendingReactions的创建过程，大概就是派发更新时：
Atom.reportChanged => propagateChanged => Reaction.onBecomeStale => Reaction.schedule => globalState.pendingReactions.push(xxx)

所以整理一下 action 事务是怎么操作的，大致就是他把函数抽出来重新组装了一下，然后在被调用时就走 4 里面的那个流程

1. startAction
2. 执行函数前半段
3. @observable变量变更 (如果有@observable的get操作，还会触发 get 逻辑更新依赖)
4. 执行函数后半段
5. endAction（执行Reactions的runReaction，派发更新）
6. 更新视图，更新依赖

observe 与 autorun 的源码追踪

为什么 observe 的回调能插在 3 和 4 之间执行

因为 observe 是通过 Listeners 的形式注入的，Listeners 是通过 notifyListeners 触发的，而 notifyListeners 的触发时机是在各个 Observable 变量的值改变时同步调用的。

observe(callback: (changes: IObjectDidChange) => void, fireImmediately?: boolean): Lambda {
    process.env.NODE_ENV !== "production" &&
        invariant(
            fireImmediately !== true,
            "`observe` doesn't support the fire immediately property for observable objects."
        )
    return registerListener(this, callback)
}

export function registerListener(listenable: IListenable, handler: Function): Lambda {
    const listeners = listenable.changeListeners || (listenable.changeListeners = [])
    listeners.push(handler)
    return once(() => {
        const idx = listeners.indexOf(handler)
        if (idx !== -1) listeners.splice(idx, 1)
    })
}

比如 ObservableValue
ObservableValue.set => ObservableValue.setNewValue => this.reportChanged(Observable extends Atom); notifyListeners
源码如下：

ObservableValue.prototype.set = function (newValue) {
    var oldValue = this.value;
    newValue = this.prepareNewValue(newValue);
    if (newValue !== globalState.UNCHANGED) {
        var notifySpy = isSpyEnabled();
        if (notifySpy && process.env.NODE_ENV !== "production") {
            spyReportStart({
                type: "update",
                name: this.name,
                newValue: newValue,
                oldValue: oldValue
            });
        }
        this.setNewValue(newValue);
        if (notifySpy && process.env.NODE_ENV !== "production")
            spyReportEnd();
    }
};

ObservableValue.prototype.setNewValue = function (newValue) {
    var oldValue = this.value;
    this.value = newValue;
    this.reportChanged();
    console.log(123)
    if (hasListeners(this)) {
        notifyListeners(this, {
            type: "update",
            object: this,
            newValue: newValue,
            oldValue: oldValue
        });
    }
};

再比如 ObservableMap
ObservableMap.set => ObservableValue._updateValue / ObservableValue._addValue => reportChanged; notifyListeners

为什么 autorun 的回调会在 5 中执行

因为 autorun 就是 new Reaction 的过程，本身就是个 Reaction，肯定需要在 endAction 中被消费，源码略微有点零散就不贴了