离职了，把 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 其实就是一个装饰器而已
- 装饰器用法的 action(arg1, arg2?, arg3?, arg4?): any
- 四个入参： 类的原型、@action 修饰的函数名、 一个 Object.defineProperty 的 descriptor（ value 为 @action 修饰函数）、undefined
- 返回值：return namedActionDecorator(arg2).apply(null, arguments as any)
- namedActionDecorator(name: string)
- 一个入参：函数名
- 返回值：return function(target, prop, descriptor: BabelDescriptor), 这三个参数，就是 action 的前三个参数，函数里面进一步处理了 descriptor 的返回值，具体如下
{ value: createAction(name, descriptor.value), // descriptor enumerable: false, configurable: true, writable: true } - 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 - executeAction(actionName: string, fn: Function, scope?: any, args?: IArguments)，这里只做了三件事，首先是_startAction，接着是执行函数，最后_endAction
runinfo = _startAction(actionName, scope, args) return fn.apply(scope, args) _endAction(runInfo) - _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 - _endAction
里面也做了很多东西
其中 endBatch：allowStateChangesEnd(runInfo.prevAllowStateChanges) allowStateReadsEnd(runInfo.prevAllowStateReads) endBatch() untrackedEnd(runInfo.prevDerivation)
其中 runReactionsif (--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 = [] }
其中 runReactionsHelper，大致就是把 pendingReactions 一个一个都执行销毁了，这个东西是 Reaction.schedule的时候一个一个插入的if (globalState.inBatch > 0 || globalState.isRunningReactions) return reactionScheduler(runReactionsHelper) // reactionScheduler就是一个 f => f()，所以就是执行 runReactionsHelperglobalState.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 里面的那个流程
- startAction
- 执行函数前半段
- @observable变量变更 (如果有@observable的get操作，还会触发 get 逻辑更新依赖)
- 执行函数后半段
- endAction（执行Reactions的runReaction，派发更新）
- 更新视图，更新依赖
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 中被消费，源码略微有点零散就不贴了
