Mobx 源码阅读简记

时间  2019-11-07
标签 mobx 源码 阅读 简记 繁體版
原文   原文链接

Mobx 源码简记

总体会写得比较乱，同时也比较简单，和读书笔记差很少，基本是边读边写。见谅~javascript

主要三大部分Atom、Observable、Derivationjava

Atom

Mobx的原子类，可以被观察和通知变化，observableValue继承于Atom。observableValue ---> Atomreact

同时里面有几个比较重要的属性与方法。数组

  • 属性安全

    • observers，用于存放这个被原子类被谁观察了，是一个set结构
    • diffValue，后续更新依赖的时候要用这个来判断

  • 方法ide

    • reportObserved，调用全局的reportObserved函数，通知自身被观察了
    • reportChanged，调用全局的propagateChanged函数，通知自身发生变化了

Observable

Observable是一个工厂函数，让数据变得可观察。这个东西须要和上述的Atom创建联系，即将具体的值与Atom联系起来。从而打通自身可以被观察，同时能通知变化的整个流程。函数

三种可被观察的数据类型：对象，数组，Map，下面简单介绍如何实现。假如都不是，就会提示用户调用observable.box，使其拥有get，set方法，即上述说的observableValue数据类型。优化

部分代码以下：ui

fucntion Observable(v) {
    // 若是已被观察，直接返回
    if (isObservable(v)) return v

    // 根据其类型分别调用observable.object、observable.array、observable.map
    const res = isPlainObject(v)
        ? observable.object(v, arg2, arg3)
        : Array.isArray(v)
            ? observable.array(v, arg2)
            : isES6Map(v)
                ? observable.map(v, arg2)
                : v

    // 返回被观察过的东西
    if (res !== v) return res
    
    // 都不是，提示用户调用observable.box(value)
    fail(
        process.env.NODE_ENV !== "production" &&
            `The provided value could not be converted into an observable. If you want just create an observable reference to the object use 'observable.box(value)'`
    )
}

重点是observable.object、observable.array、observable.map三者的实现，下面是讨论关于对象的实现方式this

  • 对象（observable.object）

    • 先建立一个base对象，咱们称为adm对象。同时，根据这个base对象建立一个proxy，会经过该proxy将会对原对象的各类值进行代理，而adm[$mobx]指向该一个新建的ObservableObjectAdministration数据类型
    • 对传进来的props（即须要被观察的对象），会先寻找是否有get属性（即计算属性），有的话会建立一个计算属性代理，并和其他的属性一块儿挂载在该proxy上

    • 有计算属性时，会新建一个既有observableValue也有derivation属性的computedValue类，存放到adm[$mobx].values里面，key就是computed的key

      • 同时会拿到它的get函数，做为这个derivation的监听函数，进行初始化监听
      • 并经过Object.defineProperty设置了该属性的get和set属性
    • 其他的属性，会新建一个observableValue，存放到adm[$mobx].values里面，并经过Object.defineProperty设置了该属性的get和set属性

    • 而后，重点是建立proxy时的handler对象的get和set函数，在有新属性访问时或改变值时会调用get和set函数

      • 访问新属性时，get函数会读取adm[$mobx]，若是没有，会经过has方法，创建一个**observableValue**，并放到adm[\$mobx].pendingKeys中（还不知道有什么用）
      • 设置新属性时，会新建一个observableValue存放进去adm[$mobx].values中，同时，经过Object.defineProperty设置了该属性的get和set属性

重点：

（observableValue简称为oV，Object.defineProperty简称为Od）

  • 上面说的全部经过Od定义后的set会调用已存放的oV的set，get会调用已存放的oV的get
  • 第一点说过oV继承于Atom，因此oV的set会调用reportChanged，oV的get会调用reportObserved

这样子，整个对象属性的监听流程就创建起来了

Reaction

Reaction（反应）是一类特殊的Derivation，能够注册响应函数，使之在条件知足时自动执行。使用以下：

// new Reaction(name, onInvalidate)
const reaction = new Reaction('name', () => {
    // do something，即响应函数，发生反作用的地方
    console.log('excuted!')
})

const ob = observable.object({
    name: 'laji',
    key: '9527'
})

reaction.track(() => {
    // 注册须要被追踪的变量，这里访问了已经被观察的ob对象，因此当ob.name或ob.key发生改变时，上面的响应函数会执行
    console.log(`my name is ${ob.name}`)
    console.log(`${ob.key} hey hey hey!`)
})

ob.name = 'mike' // 'excuted!'

让咱们分析一下源码实现，主要有几个重点：

  • 初始化Reaction类时，会将onInvalidate函数存储起来

  • 在调用track函数时，这个是重点，会调用trackDerivedFunction(this, fn, undefined)

    • trackDerivedFunction这个函数，就是依赖收集，即注册须要被追踪的变量，它会作几件事情，看下面注释
    export function trackDerivedFunction<T>(derivation: IDerivation, f: () => T, context: any) {
    // 将该 Derivation 的 dependenciesState 和当前全部依赖的 lowestObserverState 设为最新的状态
    changeDependenciesStateTo0(derivation)
    // 创建一个该derivation新的newObserving数组，里面存放的是谁被该derivation注册依赖了
    derivation.newObserving = new Array(derivation.observing.length + 100)
    // 记录新的依赖的数量
    derivation.unboundDepsCount = 0
    // 每次执行都分配一个全局的 uid
    derivation.runId = ++globalState.runId
    // 重点，将当前的derivation分配为全局的globalState.trackingDerivation，这样被观察的 Observable 在其 reportObserved 方法中就能获取到该 Derivation
    const prevTracking = globalState.trackingDerivation
    globalState.trackingDerivation = derivation
    let result
    // 下面运行存入track的函数，触发被观察变量的get方法
    if (globalState.disableErrorBoundaries === true) {
        result = f.call(context)
    } else {
        try {
            result = f.call(context)
        } catch (e) {
            result = new CaughtException(e)
        }
    }
    globalState.trackingDerivation = prevTracking
    // 比较新旧依赖，更新依赖
    bindDependencies(derivation)
    return result
}

能够看到，重点有两个，一个是将当前的derivation分配为全局的globalState.trackingDerivation，一个是下面的更新依赖过程。

  • 接下来，咱们看看触发了被观察变量的get方法，会是怎样的，上面说过，调用get方法会执行reportObserved函数

    export function reportObserved(observable: IObservable): boolean {
    // 拿到刚才被设置到全局的derivation
    const derivation = globalState.trackingDerivation
    if (derivation !== null) {
        if (derivation.runId !== observable.lastAccessedBy) {
            observable.lastAccessedBy = derivation.runId
            // 这行是重点，将被观察的变量，放到derivation.newObserving数组中，所以，derivation里就存放了此次访问中被观察的变量
            derivation.newObserving![derivation.unboundDepsCount++] = observable
            if (!observable.isBeingObserved) {
                observable.isBeingObserved = true
                observable.onBecomeObserved()
            }
        }
        return true
    } else if (observable.observers.size === 0 && globalState.inBatch > 0) {
        queueForUnobservation(observable)
    }
    return false
}

  • 以后是bindDependencies函数的执行。这里面有两点，不作代码解读了：

    • 一是主要是比较derivation的新旧observing（存放被观察变量的数组），防止重复记录，同时去除已过时的被观察变量
    • 二是，observable（被观察的变量）的observers（是一个Set结构）更新里面存放的derivation，即记录自身被谁观察了，在后面调用reportChanged时，触发响应函数

被观察的变量发生变化时

此时会调用observable的set函数，而后调用reportChanged，最终会调用一个叫作propagateChanged函数。

export function propagateChanged(observable: IObservable) {
    // 已经在运行了，直接返回
    if (observable.lowestObserverState === IDerivationState.STALE) return
    observable.lowestObserverState = IDerivationState.STALE

    // 上面说过，observable（被观察的变量）的observers存放着derivation
    // 这里就是执行每一个derivation的onBecomeStale函数
    observable.observers.forEach(d => {
        if (d.dependenciesState === IDerivationState.UP_TO_DATE) {
            if (d.isTracing !== TraceMode.NONE) {
                logTraceInfo(d, observable)
            }
            d.onBecomeStale()
        }
        d.dependenciesState = IDerivationState.STALE
    })
}

onBecomeStale最终会调用derivation里的schedule函数，里面作了两件事：

  • 把自身推动全局的globalState.pendingReactions数组

  • 执行runReactions函数

    • 该函数就核心就作一件事情，遍历globalState.pendingReactions数组，执行里面每一个derivation的runReaction函数
    • runReaction最终会调用derivation自身的onInvalidate，即响应函数

至此，整个mobx的数据观察与响应流程就都一一解释完整了（autorun，autorunAsync，when等函数都是基于Reaction来实现的，就不做过多解读了）

Mobx-React源码简记

既然mobx都说了，那就把mobx-react也分析一下吧。其实很简单，只要理解了Reaction与Observable，就很容易明白mobx-react的实现了。

mobx-react的实现主要也是两点

  • 经过provide和inject，将已经被观察过的observerableStore集中起来并按需分配到所须要的组件中
  • 被observer的组件，改写其render函数，使其能够响应变化

第一点比较简单，实现一个hoc，把observerableStore添加到context上，而后被inject的组件就能够拿到所需的observerableStore

咱们重点看下第二点，实现第二点的主要逻辑，在observer.js里面的makeComponentReactive函数中，看下面简化版的重点解析

// makeComponentReactive
function makeComponentReactive(render) {
    if (isUsingStaticRendering === true) return render.call(this)
    // 改造后的render函数
    function reactiveRender() {
        // 防止重复执行响应函数，由于componentWillReact有可能有反作用
        isRenderingPending = false
        // render函数执行后返回的jsx
        let rendering = undefined
        // 注册须要被追踪的变量
        reaction.track(() => {
            if (isDevtoolsEnabled) {
                this.__$mobRenderStart = Date.now()
            }
            try {
                // _allowStateChanges是安全地执行原来的render函数，假如在action外有更改变量的行为，会报错
                // 重点是这个，由于render函数被执行了，因此假如里面有被observe过的变量，就能被追踪，更新到依赖该reaction的依赖列表里面
                rendering = _allowStateChanges(false, baseRender)
            } catch (e) {
                exception = e
            }
            if (isDevtoolsEnabled) {
                this.__$mobRenderEnd = Date.now()
            }
        })
        
        return rendering
    }
    // ....省略一些代码
    // 新建一个Reaction，注册响应函数
    const reaction = new Reaction(`${initialName}#${rootNodeID}.render()`, () => {
        if (!isRenderingPending) {
            // 正在执行响应函数
            isRenderingPending = true
            // 这里就是执行新的componentWillReact生命周期的地方
            if (typeof this.componentWillReact === "function") this.componentWillReact() 
            if (this.__$mobxIsUnmounted !== true) {
                let hasError = true
                try {
                    setHiddenProp(this, isForcingUpdateKey, true)
                    // 也是重点，经过forceUpdate，更新组件
                    if (!this[skipRenderKey]) Component.prototype.forceUpdate.call(this)
                    hasError = false
                } finally {
                    setHiddenProp(this, isForcingUpdateKey, false)
                    if (hasError) reaction.dispose()
                }
            }
        }
    })
    // 改写原来的render
    reaction.reactComponent = this
    reactiveRender[mobxAdminProperty] = reaction
    this.render = reactiveRender
    return reactiveRender.call(this)
}

能够见到，经过创建一个Reaction，实现了render函数里的被观察的变量收集及响应函数注册。并且在经过forceUpdate从新更新组件后，render函数会被从新执行一遍，从而实时更新被观察的变量。总体的实现仍是巧妙的。

除此以外，还有一些生命周期的优化，对props、state也进行监听等操做，在这里就不一一解读了

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程