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)'`
)
}
Mobx 源码简记
整体会写得比较乱,同时也比较简单,和读书笔记差不多,基本是边读边写。见谅~
主要三大部分
Atom
、Observable
、Derivation
Atom
Mobx的原子类,能够被观察和通知变化,observableValue继承于Atom。observableValue ---> Atom
同时里面有几个比较重要的属性与方法。
Observable
Observable是一个工厂函数,让数据变得可观察。这个东西需要和上述的Atom建立联系,即将具体的值与Atom联系起来。从而打通自身能够被观察,同时能通知变化的整个流程。
三种可被观察的数据类型:对象,数组,Map,下面简单介绍如何实现。假如都不是,就会提示用户调用observable.box,使其拥有get,set方法,即上述说的observableValue数据类型。
部分代码如下:
重点是observable.object、observable.array、observable.map三者的实现,下面是讨论关于对象的实现方式
重点:
(observableValue简称为oV,Object.defineProperty简称为Od)
这样子,整个对象属性的监听流程就建立起来了
Reaction
Reaction(反应)是一类特殊的Derivation,可以注册响应函数,使之在条件满足时自动执行。使用如下:
让我们分析一下源码实现,主要有几个重点:
初始化Reaction类时,会将onInvalidate函数存储起来
在调用track函数时,这个是重点,会调用trackDerivedFunction(this, fn, undefined)
可以看到,重点有两个,一个是将当前的derivation分配为全局的globalState.trackingDerivation,一个是下面的更新依赖过程。
接下来,我们看看触发了被观察变量的get方法,会是怎样的,上面说过,调用get方法会执行reportObserved函数
之后是bindDependencies函数的执行。这里面有两点,不做代码解读了:
被观察的变量发生变化时
此时会调用observable的set函数,然后调用reportChanged,最终会调用一个叫做propagateChanged函数。
onBecomeStale最终会调用derivation里的schedule函数,里面做了两件事:
至此,整个mobx的数据观察与响应流程就都一一解释完整了(autorun,autorunAsync,when等函数都是基于Reaction来实现的,就不作过多解读了)
Mobx-React源码简记
既然mobx都说了,那就把mobx-react也分析一下吧。其实很简单,只要理解了Reaction与Observable,就很容易明白mobx-react的实现了。
mobx-react的实现主要也是两点
第一点比较简单,实现一个hoc,把observerableStore添加到context上,然后被inject的组件就可以拿到所需的observerableStore
我们重点看下第二点,实现第二点的主要逻辑,在
observer.js
里面的makeComponentReactive函数中,看下面简化版的重点解析可以见到,通过建立一个Reaction,实现了render函数里的被观察的变量收集及响应函数注册。而且在通过forceUpdate重新更新组件后,render函数会被重新执行一遍,从而实时更新被观察的变量。整体的实现还是巧妙的。
除此之外,还有一些生命周期的优化,对props、state也进行监听等操作,在这里就不一一解读了