共计 7122 个字符，预计需要花费 18 分钟才能阅读完成。
Mobx 源码简记
整体会写得比较乱，同时也比较简单，和读书笔记差不多，基本是边读边写。见谅~
主要三大部分 Atom、Observable、Derivation
Atom
Mobx 的原子类，能够被观察和通知变化，observableValue 继承于 Atom。observableValue —> Atom
同时里面有几个比较重要的属性与方法。
属性
observers，用于存放这个被原子类被谁观察了，是一个 set 结构
diffValue，后续更新依赖的时候要用这个来判断
方法
reportObserved，调用全局的 reportObserved 函数，通知自身被观察了
reportChanged，调用全局的 propagateChanged 函数，通知自身发生变化了
Observable
Observable 是一个工厂函数，让数据变得可观察。这个东西需要和上述的 Atom 建立联系，即将具体的值与 Atom 联系起来。从而打通自身能够被观察，同时能通知变化的整个流程。
三种可被观察的数据类型：对象，数组，Map，下面简单介绍如何实现。假如都不是，就会提示用户调用 observable.box，使其拥有 get，set 方法，即上述说的 observableValue 数据类型。
部分代码如下：
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 三者的实现，下面是讨论关于对象的实现方式
对象（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 也进行监听等操作，在这里就不一一解读了