前言
emm 由于实习的项目组只有自己一个人,选型开发都为所欲为了tat，从以redux进行数据流管理的使用，决定尝试一波实战mobx，在使用中不禁在想，mobx是怎么和react连在一起，而mobx又是为什么可以如此高效便捷。react-redux的驱动视图更新是通过connect组件,在外层HOC中订阅store改变触发
setState({})进行更新视图。而mobx-react中的observer呢？
这里可以看到最关键的一点,区别于redux的更新方式,在mobx-react中是直接使用forceUpdate方法进行更新视图,而区别于redux 对store的订阅,mobx-react又是怎么样触发forceUpdate呢？
/**
*强制更新组件https://github.com/mobxjs/mobx-react/blob/master/src/observer.js#L188
*/
Component.prototype.forceUpdate.call(this)
定位到observer,先了解observer执行的流程
1.png
核心点
2.png
talk is so cheap show you the code
//...
// https://github.com/mobxjs/mobx-react/blob/master/src/observer.js#L334
mixinLifecycleEvents(target)
//mixin组件的生命周期,将reactiveMixin中的函数mixin到具体的生命周期中.
在mixin中最核心需要关注的就是componentWillMount,
先简单提一下mixinLifecycleEvents区别对待的是shouldComponentUpdate,如果该方法没有定义observer会直接将其重写为PureComponent的shouldComponentUpdate的实现
进一步看componentWillMount
//https://github.com/mobxjs/mobx-react/blob/master/src/observer.js#L168
// wire up reactive render
//保存当前函数的render
const baseRender = this.render.bind(this)
let reaction = null
let isRenderingPending = false
const initialRender = () => {
/*绑定reaction，observable属性改变的时候会触发这个(mobx实质是双向绑定，observable更新视图也要更新，这里是数据绑定到视图上的第一步。)
*/
reaction = new Reaction(`${initialName}#${rootNodeID}.render()`, () => {
if (!isRenderingPending) {
// N.B. Getting here *before mounting* means that a component constructor has side effects (see the relevant test in misc.js)
// This unidiomatic React usage but React will correctly warn about this so we continue as usual
// See #85 / Pull #44
isRenderingPending = true
if (typeof this.componentWillReact === "function") this.componentWillReact() // TODO: wrap in action?
if (this.__$mobxIsUnmounted !== true) {
// If we are unmounted at this point, componentWillReact() had a side effect causing the component to unmounted
// TODO: remove this check? Then react will properly warn about the fact that this should not happen? See #73
// However, people also claim this migth happen during unit tests..
let hasError = true
try {
isForcingUpdate = true
if (!skipRender) Component.prototype.forceUpdate.call(this)
hasError = false
} finally {
isForcingUpdate = false
if (hasError) reaction.dispose()
}
}
}
})
reaction.reactComponent = this
reactiveRender.$mobx = reaction
// 重写render
this.render = reactiveRender
// 实际的render
return reactiveRender()
}
const reactiveRender = () => {
isRenderingPending = false
let exception = undefined
let rendering = undefined
/**
* 核心关联部分
* 追踪数据
* https://github.com/mobxjs/mobx/blob/master/src/core/reaction.ts#L112
* reaction.track(fn: () => void)
* 实际上
* trackDerivedFunction(derivation: IDerivation, f: () => T, context)
* const result = trackDerivedFunction(this, fn, undefined)// this对应reaction,fn对应track中的fn
* (https://github.com/mobxjs/mobx/blob/master/src/core/derivation.ts#L131)
* trackDerivedFunction这个函数有什么作用？
* 执行函数f并跟踪那些可观察并且正在f函数中引用的变量，将这些可追踪的变量注册并储存在derivation中即reaction中
*
* f中引用的变量 核心上是通过atom.reportObserved()关联引用
* 简单例子见 makePropertyObservableReference 中的
* get: function() {
* atom.reportObserved()
* return valueHolder
* },
*
* 重新到trackDerivedFunction执行中
* result = f.call(context);
*f本身已经是箭头函数了,上下文已经绑定过了. 这里实际上就是执行component的render,
*实际上就是通过这里收集到observable的引用 （依赖收集）
*trackDerivedFunction中会derivation进行属性更新,以及通过bindDependencies更新依赖收集的情况。
**/
reaction.track(() => {
if (isDevtoolsEnabled) {
this.__$mobRenderStart = Date.now()
}
try {
rendering = extras.allowStateChanges(false, baseRender)
} catch (e) {
exception = e
}
if (isDevtoolsEnabled) {
this.__$mobRenderEnd = Date.now()
}
})
if (exception) {
errorsReporter.emit(exception)
throw exception
}
return rendering
}
this.render = initialRender
},
这一次的阅读之行到此就暂告一段落了,关于derivation原理的进一步理解需要进一步学习mobx的源码。目前只是有较浅的理解,如有不正之处，请大家指出！ tat 毕竟只是闭门造车。
注释版源码
学习资料
- http://www.cnblogs.com/rubylouvre/p/6058575.html
- https://zhuanlan.zhihu.com/p/27448262