MobX 源码解析之 @action 的事务特性(离职拷贝版)

离职了,把 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 中被消费,源码略微有点零散就不贴了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • Mobx解决的问题 传统React使用的数据管理库为Redux。Redux要解决的问题是统一数据流,数据流完全可控...
    前端大神888阅读 424评论 1 0
  • 注意:这不是教学,仅仅是学习笔记 Mobx 原则 Mobx 是单向的数据流,也就是 Action 改变 state...
    yyscc阅读 611评论 0 0
  • 1. 介绍 1.1. 原理 React的render是 状态 转化为树状结构的渲染组件的方法而MobX提供了一种存...
    三月懒驴阅读 12,807评论 1 28
  • 官方文档-传送 MobX是响应式编程,实现状态的存储和管理。使用MobX将应用变成响应式可归纳为三部曲: 定义状态...
    boyrt阅读 7,916评论 0 10
  • 【现货】 下午以一波反弹过程中的情绪很稳定,比较难得,只是2点40的一次诱空盘口表现不好,不够自然,尾盘收的略牵强...
    资本是个球阅读 59评论 0 0