登录
5.响应式系统比对：手写 React 响应式状态库 Mobx
前言
我们从前几篇文章中学到了数据响应式的实现原理，虽然它们的实现方式并不相同，但本质原理都是一样的，都是在数据读取的时候进行依赖收集，在数据更改的时候触发依赖。我们知道在 React 的技术栈中也有一个状态管理库 —— Mobx 也是通过数据响应式的方式实现的，那么既然也是数据响应式，那么它的实现本质原理应该都跟 Vue 是一致的，但我们不应该它的代码设计方式改变了，就看不懂了，而恰恰相反正因为我们熟悉 Vue 的数据响应式原理，所以我们 Vue 技术栈的同学应该更容易理解 Mobx 的实现原理才对，不然你不能说你精通了 Vue 的数据响应式原理。
Mobx 与 Vue 的响应式数据的差异
具体来说就是如果在 Vue 中你创建了一个引用类型的响应式数据，你可以直接修改它：
const vueProxy = reactive({ name: 'Cobyte' })
// 直接修改
vueProxy.name = '掘金签约作者'
在 Vue 这种操作是很正常的，但在 Mobx 中这种行为却是不提倡的。那么在 Mobx 中需要怎么修改呢？在 Mobx 中你需要定义一个函数来进行修改：
const mobxProxy = observable({ name: 'Cobyte', update(value) { this.name = value }})
// 通过函数进行修改
mobxProxy.update('掘金签约作者')
当然，在 Mobx 中你也可以像 Vue 那样操作数据，但 Mobx 并不提倡，所以既然你使用了 Mobx 那就就要遵循它的规则，并学习它的优秀设计原理，然后融化为你知识的一部分，在将来你设计代码架构的时候，你所学习到的知识将在无形中响应式着你。
Mobx 的设计原理
我们知道虽然 Vue2 和 Vue3 数据响应式部分的实现有所不同，但实现思路还是一致的。那么跟 Vue 相比同样是实现响应式数据的 Mobx 最大的区别是什么呢？那么要了解这个就去了解 Mobx 的设计原理了。Mobx 的最核心设计原则就是跟 React 的单向数据流设计一致，也同样是单向数据流。也正是基于这个原则导致 Mobx 的代码架构跟 Vue 的数据响应式部分差别比较大。当然 Vue 也是单向数据流设计，并且 Vue 官方也提倡单向数据流，但只是从 Vue 框架层限制了组件的 props 的第一层，而并没有从数据响应式的底层进行限制，而 Mobx 则是从数据响应式的底层就进行限制，所以 Mobx 的单向数据流更为彻底。
我们在 Vue 中创建了一个响应式数据，如果这个响应式数据是引用类型的话，你可以在组件及任何一个其后代组件任何一个角度去修改它，这种方式对于开发功能的人员来说是非常方便的，但对于维护人员来说很可能就是灾难，因为维护人员有时候需要监听数据的更新行为，可并不知道这个响应式数据都在什么地方进行更新。
而在 Mobx 中你创建了一个响应式数据，即便这个响应式数据也是引用类型，在 Mobx 中如果你直接对响应式数据进行修改的话，Mobx 会发出警告，因为在 Mobx 中你需要 React 那样通过一个函数来进行修改，这样就保证了单向数据流的使用规范。
默认情况下，不允许在 actions 之外改变 state。这有助于在代码中清楚地对状态更新发生的位置进行定位。
上述引用来自 Mobx 中文官网，那么怎么可以做到直接修改响应式数据的属性值就发出警告，而通过响应式数据的函数就不会呢？其实原理很简单，我们可以设置一个全局开关，当这个开关打开的时候，我们就可以进行修改，否则就提示警告。在 Mobx 中会对修改函数进行一层封装，变成成一个高阶函数，在执行修改函数之前会打开开关，这样再去修改就不会提示警告了。
Mobx 的初步实现（observable 实现）
我们知道 Mobx 是参考了 Vue 的数据响应式原理，那么最初肯定是只有参考 Vue2 了，那么根据 Vue2 的数据响应式原理，我们很清楚知道一个对象要观察它的数据变化，需要通过 Object.defineProperty 劫持每一个属性的 getter、setter 的操作，同时属性值需要通过闭包进行缓存，还需要通过发布订阅模式来实现依赖（订阅者）和响应式数据之间的通信，具体就是在 getter 的时候进行订阅，在 setter 的时候进行发布，那么在 Vue2 数据响应式中每一个属性所形成的闭包就是一个发布者。那么在 Mobx 的属性值是否也需要通过闭包进行缓存呢？
在 Vue2 中需要一个 Observer 的观察器类来管理响应式数据的相关操作，在 Mobx 中同样需要一个观察器类来管理响应式数据的相关操作，它就是 ObservableObjectAdministration。那么根据我们前面的所学的经验可以很快得到 ObservableObjectAdministration 类的基础代码。如下：
// 对象观察器类
class ObservableObjectAdministration{
constructor(target) {
// 原始值保存
this.target_ = target
// 订阅者存储中心
this.values_ = new Map()
}
}
根据 Vue2 的数据响应式原理我们知道需要通过一个 observe 的函数创建响应式数据，在 Mobx 中也提供了一个叫 observable API 来创建响应式数据。那么根据 Vue2 我们知道需要实例化一个观察器对象，并且把观察器实例对象设置到需要观察的数据上，这样该数据就是响应式数据了。
function observable(target) {
const adm = new ObservableObjectAdministration(target)
// 把观察器实例对象设置到需要观察的数据上
target.__ob__ = adm
return target
}
在 Vue2 中是在观察器内部进行初始化对被观察数据进行遍历其属性通过 Object.defineProperty 劫持每一个属性的 getter、setter 操作。同样 Mobx 也需要这样，但 Mobx 的设计是在外部进行遍历属性，而不是在观察器内部进行遍历。
function observable(target) {
const adm = new ObservableObjectAdministration(target)
// 把观察器实例对象设置到需要观察的数据上
target.__ob__ = adm
+ Object.keys(target).forEach(key => {
+ // 在这里通过 Object.defineProperty 劫持每一个属性的 `getter`、`setter` 操作
+ adm.defineObservableProperty_(key, target[key])
+ })
return target
}
// 对象观察器
class ObservableObjectAdministration{
constructor(target) {
// 原始值保存
this.target_ = target
// 订阅者存储中心
this.values_ = new Map()
}
+ // 劫持属性的 getter、setter
+ defineObservableProperty_(key, value) {
+ Object.defineProperty(this.target_, key, {
+ get: () => {
+ // 获取值
+ },
+ set: (val) => {
+ // 设置值
+ }
+ })
+ }
}
在 Vue2 中循环劫持响应式对象的属性时是通过闭包的方式的，即每一个属性都会形成自己的一个闭包，最后读取和设置的值都是闭包中的变量值。而 Mobx 中则把每一个属性的值都包装成一个对象，本质上是通过沙箱模式将每个属性值进行隔离。
那么下面就让我们来实现 Mobx 中的属性劫持吧。
// 对象观察器
class ObservableObjectAdministration{
constructor(target) {
// 原始值保存
this.target_ = target
// 订阅者存储中心
this.values_ = new Map()
}
// 劫持属性的 getter、setter
defineObservableProperty_(key, value) {
+ // 将属性值包装成响应式对象
+ const observable = new ObservableValue(value)
// 将每一个属性和属性值进行记录起来
+ this.values_.set(key, observable)
Object.defineProperty(this.target_, key, {
get: () => {
// 获取值
+ return this.values_.get(key).get()
},
set: (val) => {
// 设置值
+ this.values_.get(key).setNewVal(val)
}
})
}
}
+ // 将属性值包装成响应式对象
+ class ObservableValue {
+ constructor(value) {
+ this.value_ = value
+ }
+ get() {
+ // 在这里进行依赖收集
+ console.log('依赖收集')
+ return this.value_
+ }
+ setNewVal(val) {
+ this.value_ = val
+ // 在这里进行依赖触发
+ console.log('依赖触发')
+ }
+ }
通过上面的代码我们可以看到 Mobx 在通过 Object.defineProperty 劫持对象属性的时候会把属性值通过一个对象进行包裹，也就是 ObservableValue 的实例对象 observable，并且通过键值对的方式保存在 ObservableObjectAdministration 的 this.values_ 上，然后在 getter 的时候实际获取的是对应 key 的 observable 对象中的值。那么很容易看出来每一个 ObservableValue 的实例对象 observable 都是一个发布者，或者叫被观察者更为贴切一些，反正是一个被观察的对象。
接下来我们就可以进行测试了：
// 创建响应式对象
const mobxProxy = observable({ name: 'Cobyte' })
// 读取触发依赖收集
mobxProxy.name
// 设置值触发依赖
mobxProxy.name = '我是掘金签约作者'
打印结果如下：
小结
在前面的讲解 Vue2 的数据响应式原理的文章中，我们说其实每一个属性所形成的闭包就是一个发布者，可能大家还有点难以理解，那么在 Mobx 中每一个属性都通过一个沙箱对象进行包裹，那么这个沙箱对象就是一个发布者，而且代码结构和所谓传统发布订阅模式的代码结构也是比较相似。
在 Mobx 中实现发布订阅模式
那么根据上文我们知道 ObservableValue 是一个发布者，那么我们根据前面的所学的知识，可以很容易完善发布订阅模式的功能。代码如下：
+ // 全局属性
+ const globalState = {
+ trackingDerivation: null // Mobx 中的订阅者全局变量
+ }
// 将属性值包装成响应式对象
class ObservableValue {
constructor(value) {
this.value_ = value,
+ // 订阅者存储中心
+ this.observers_ = new Set()
}
get() {
// 在这里进行依赖收集
+ if (globalState.trackingDerivation) {
+ this.observers_.add(globalState.trackingDerivation)
+ }
return this.value_
}
setNewVal(val) {
this.value_ = val
// 在这里进行依赖触发
+ this.observers_.forEach(derivation => derivation())
}
}
我们经过上面的功能完善，我们从代码结构可以看得出 ObservableValue 是一个发布者。那么接下来我们就可以进行最简单的功能测试了。测试代码如下：
const mobxProxy = observable({ name: 'Cobyte' })
// 设置订阅者
const subscriber = function() {
console.log(`我是：${mobxProxy.name}`)
}
globalState.trackingDerivation = subscriber
subscriber()
globalState.trackingDerivation = null
// 设置值触发依赖
mobxProxy.name = '掘金签约作者'
我们可以看到正确打印了我们期待的结果：
实现订阅者中介 Reaction
接下来我们继续完善订阅者功能，根据我们前面所学习的知识，我们知道需要一个订阅者中介类，在 Mobx 中同样存在一个订阅者中介类，也就是 Reaction，那么根据 Vue2 的 Watcher 功能我们很快可以实现如下代码：
class Reaction {
constructor(fn) {
this._fn = fn
this.get()
}
get() {
globalState.trackingDerivation = this
this._fn()
globalState.trackingDerivation = null
}
update() {
this._fn()
}
}
因为订阅者的功能修改了，所以同时需要修改一下 ObservableValue 类：
// 将属性值包装成响应式对象
class ObservableValue {
// 省略...
setNewVal(val) {
this.value_ = val
// 在这里进行依赖触发
- this.observers_.forEach(derivation => derivation())
+ this.observers_.forEach(derivation => derivation.update())
}
}
接着我们进行测试：
const mobxProxy = observable({ name: 'Cobyte' })
// 设置订阅者
const subscriber = function() {
console.log(`我是：${mobxProxy.name}`)
}
new Reaction(subscriber)
// 设置值触发依赖
mobxProxy.name = '掘金签约作者'
我们可以看到也是正确打印了我们期待的结果：
但上述 Reaction 的实现是根据 Vue2 的 Watcher 类实现的，实现的特点是在初始化的时候进行传进来的副作用函数，并且进行依赖收集，在更新的时候则不再进行依赖收集。而 Mobx 中的实现并不是这样的，但基本原理是一致的，就是在初始化的时候进行依赖收集，更新的时候则不再进行依赖收集，所以我们根据 Mobx 中的实现重新改造一下 Reaction 类。
Reaction 改造如下：
class Reaction {
constructor(onInvalidate) {
this.onInvalidate_ = onInvalidate
}
track(fn) {
globalState.trackingDerivation = this
fn()
globalState.trackingDerivation = null
}
// 更新的时候执行
schedule_() {
this.onInvalidate_()
}
}
我们可以看到在 Reaction 初始化的时候会传进来一个回调函数，这个回调函数会在更新的时候进行，而依赖收集则在 track 函数中进行，看函数名都可以顾名思义了。
实现 autorun 函数
因为 Reaction 更新执行的函数变了，所以我们也需要修改 ObservableValue 类相关功能：
// 将属性值包装成响应式对象
class ObservableValue {
// 省略...
setNewVal(val) {
this.value_ = val
// 在这里进行依赖触发
- this.observers_.forEach(derivation => derivation.update())
+ this.observers_.forEach(derivation => derivation.schedule_())
}
}
那么接下来需要重新修改测试代码：
const mobxProxy = observable({ name: 'Cobyte' })
// 设置订阅者
const subscriber = function() {
console.log(`我是：${mobxProxy.name}`)
}
// 实例化订阅者中介
const reaction = new Reaction(
() => {
// 回调函数中执行依赖收集函数
reaction.track(subscriber)
}
)
// 立即执行
reaction.schedule_()
// 设置值触发依赖
mobxProxy.name = '掘金签约作者'
重新执行也同样打印了正确的结果：
我们可以看到要像之前那样实现自动执行订阅者函数，需要在实例化 Reaction 的时候设置回调函数 onInvalidate，然后把依赖收集函数的执行放到 onInvalidate 函数中，然后需要开始的时候就立即执行更新方法。这部分相对 Vue2 的 Watcher 类的实现就没有那么容易理解，这主要是因为 Mobx 主要是服务于 React，受 React 的特点影响，所以才这么设计。在后续我们再详细讲解为什么这么设计。
其实上述对订阅者的实现方法，就是 Mobx 的 autorun API 的实现原理。我们将其进行封装实现。
function autorun(view) {
// 实例化订阅者中介
const reaction = new Reaction(
() => {
// 回调函数中执行依赖收集函数
reaction.track(view)
}
)
// 立即执行
reaction.schedule_()
}
然后我们的测试代码就可以修改成：
const mobxProxy = observable({ name: 'Cobyte' })
// 设置订阅者
const subscriber = function() {
console.log(`我是：${mobxProxy.name}`)
}
autoruo(subscriber)
// 设置值触发依赖
mobxProxy.name = '掘金签约作者'
修改之后，同样打印了正确的结果：
实现使用 actions 更新 state
通过上文对 Mobx 的设计原理的讲解，我们知道为了帮助开发人员清楚地知道状态修改的位置，默认情况下，Mobx 不允许在 actions 之外改变状态。
Mobx 使用单向数据流，利用 action 改变 state ，进而更新所有受影响的 view
上述引用来自 Mobx 中文官网，所谓 action 其实就是一个函数，例如下面的例子：
const mobxProxy = observable({
name: 'Cobyte',
update(value) {
this.name = value
}
})
// 通过函数进行修改
mobxProxy.update('掘金签约作者')
通过上文我们知道它的基本原理就是设置一个全局开关，当这个开关打开的时候，我们就可以进行修改，否则就提示警告。其实对修改函数会进行一层封装，变成成一个高阶函数，在执行修改函数之前会打开开关，这样再去修改就不会提示警告了。
我们知道每一个属性值都被封装成了一个 observable 对象，那么我们就可以在 ObservableValue 类中对包装的值进行处理，如果是函数的话，就封装成一个高阶函数（高阶函数（higher-order function）—— 如果一个函数接收的参数为或返回的值为函数，那么我们可以将这个函数称为高阶函数）。
首先我们添加一个全局开关变量：
const globalState = {
trackingDerivation: null,
+ // 是否允许修改状态的开关
+ allowStateChanges: false
}
那么我们就可以在 ObservableValue 类中对包装的值进行处理：
class ObservableValue {
constructor(value) {
+ let action
+ // 如果是函数则封装 action 高阶函数
+ if (typeof value === 'function') {
+ action = function(...agrs) {
+ // 在执行原始函数之前开启允许修改开关
+ globalState.allowStateChanges = true
+ // 通过 apply 执行原始函数
+ value.apply(this, agrs)
+ // 执行完原始函数后又关闭开关
+ globalState.allowStateChanges = false
+ }
+ }
- this.value_ = value
+ // 判断如果是函数则使用封装的 action 高阶函数
+ this.value_ = typeof value === 'function' ? action : value,
this.observers_ = new Set()
}
}
接着我们就可以设置值的时候进行判断了：
class ObservableValue {
setNewVal(val) {
+ if (!globalState.allowStateChanges) {
+ console.warn('Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed')
+ }
this.value_ = val
// 在这里进行依赖触发
this.observers_.forEach(derivation => derivation.schedule_())
}
}
这时我们就可以进行测试了：
const mobxProxy = observable({
name: 'Cobyte',
update(val) {
this.name = val
}
})
// 设置订阅者
const subscriber = function() {
console.log(`我是：${mobxProxy.name}`)
}
autorun(subscriber)
// 设置值触发依赖
mobxProxy.name = '掘金签约作者'
这个时候我们就可以看到直接通过属性进行修改值会发出警告了，然后我们再通过函数修改，则不会了。
mobxProxy.update('掘金签约作者')
通过函数修改则不会发出警告了。
接下来，我们再对我们的代码进行重构一下，让代码结构更接近 Mobx 源码。
+ function createAction(fn) {
+ // 这里有一个需要注意的点，返回函数需要使用 function 进行声明会比较方便获取原生对象的上下文，这里涉及到 this 的问题
+ function res() {
+ // 最后通过 executeAction 执行
+ return executeAction(fn, this, arguments)
+ }
+ return res
+ }
+ function executeAction(fn, scope, args) {
+ // 在执行原始函数之前开启允许修改开关
+ globalState.allowStateChanges = true
+ // 因为是用户写的函数，可能会存在错误，所以使用 try
+ try {
+ // 通过 apply 执行原始函数
+ return fn.apply(scope, args)
+ } catch (err) {
+ throw err
+ } finally {
+ // 执行完原始函数后又关闭开关
+ globalState.allowStateChanges = false
+ }
+ }
+ function deepEnhancer(value) {
+ // 如果是函数则封装 action 高阶函数
+ if (typeof value === 'function') {
+ return createAction(value)
+ }
+ // todo
+ // 如果是 observable 对象就返回，不处理
+ // 如果是对象进行递归处理
+ // 如果是数组也进行数组的递归处理
+ return value
+ }
class ObservableValue {
constructor(value) {
+ // 通过 deepEnhancer 处理 value 值
+ this.value_ = deepEnhancer(value)
this.observers_ = new Set()
}
setNewVal(val) {
+ // 设置值之前进行判断是否允许修改
+ checkIfStateModificationsAreAllowed(this)
this.value_ = val
// 在这里进行依赖触发
this.observers_.forEach(derivation => derivation.schedule_())
}
}
+ function checkIfStateModificationsAreAllowed(atom) {
+ if (!globalState.allowStateChanges) {
+ console.warn('Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed')
+ }
+ }
经过上面的重构我们的代码结构就更接近 Mobx 源码了，所以重构是我们日常编程中非常重要的组成部分。
实现 makeAutoObservable
我们知道 Redux 是函数式编程的推崇者，API 的设计对喜欢函数式编程的开发者非常友好，而 Mobx 的设计则更多偏向于面向对象编程（OOP），在 Mobx 中 class 是一等公民，这对喜欢 OOP 思想的开发者则非常友好。甚至于在 Mobx 的官网给出的实例代都是 OOP 实现的。
Mobx 官网 OOP 例子：
import { makeAutoObservable } from "mobx"
class Timer {
secondsPassed = 0
constructor() {
makeAutoObservable(this)
}
increase() {
this.secondsPassed += 1
}
reset() {
this.secondsPassed = 0
}
}
const myTimer = new Timer()
我们通过上面的例子可以看到 class 对象的响应式是通过 makeAutoObservable 这个 API 实现的，我们有了上述实现的 Mobx 基本原理的代码基础，再去实现 makeAutoObservable API 是很容易的。
在实现之前，我们需要对 ES class 的基础知识复习一下，class 中的属性在实例化是在实例化对象上的，而 class 的方法则是在原型上的，也就是说上述例子的实现等同于下面的实现：
class Timer {
secondsPassed = 0
constructor() {
makeAutoObservable(this)
}
}
Timer.prototype.increase = function() {
this.secondsPassed += 1
}
Timer.prototype.reset = function(){
this.secondsPassed = 0
}
这些是属于 JavaScript 的面向对象与继承部分的基础知识，这里不作过度深入说明。
通过上文我们知道在 Mobx 中实现数据响应式跟 Vue2 中的基本原理是一样的，也就是遍历要实现响应式的对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。但 通过 class 实例化的对象除了要获取自身的属性之外，还要获取原型对象上的属性，因为 class 中的方法是设置在原型上的。那么理解了这些之后我们就可以实现 makeAutoObservable API 了。
接下来我们实现一下：
function makeAutoObservable(target) {
const adm = new ObservableObjectAdministration(target)
target.__ob__ = adm
// 获取实例的原型对象
const proto = Object.getPrototypeOf(target)
// 同时获取实例对象上的 key 和 原型对象上的 key，才能完整获取 class 中的属性和方法，同时通过 Set 进行去重
const keys = new Set([...Reflect.ownKeys(target), ...Reflect.ownKeys(proto)])
// 删除不需要监听的属性
keys.delete("constructor")
keys.delete('__ob__')
// 遍历所有属性进行监听
keys.forEach(key => {
adm.defineObservableProperty_(key, target[key])
})
return target
}
我们可以看到有了之前实现 Mobx 的基础，再实现 makeAutoObservable 是非常容易的。相比较上面实现的 observable，makeAutoObservable 的实现最大的不同就是属性的获取，因为 makeAutoObservable 是应用在 class 类上的，所以除了获取对象自身上的属性之外，还要获取原型对象上的属性才能完整获取 class 中的属性和方法，同时还需要对所获取的属性和方法进行去重，最后去掉不需要监听的属性。
接下来我们就可以进行测试了：
class Timer {
secondsPassed = 0
constructor() {
makeAutoObservable(this)
}
increase() {
this.secondsPassed += 1
}
reset() {
this.secondsPassed = 0
}
}
const myTimer = new Timer()
// 设置订阅者
const subscriber = function() {
console.log(`现在的秒数：${myTimer.secondsPassed}`)
}
autorun(subscriber)
// 每秒更新一次
setInterval(() => {
myTimer.increase()
}, 1000)
打印结果如下：
可以看到我们实现的 makeAutoObservable 方法可以正确应用在 class 上了。
将手写的 Mobx 应用到 React 上
这小结对 React 不太熟悉的同学也没关太大关系，跟着敲就可以了。首先我们通过 create-react-app 这个脚手架快速创建一个 React 项目。
npx create-react-app react-app
我们把上面实现的 Mobx 功能内容设置到 ./src/mini-mobx.js 中，并且把使用到的函数进行导出。
接着我们把 App.js 文件的内容修改如下：
import { makeAutoObservable, observer } from "./mini-mobx"
class Timer {
secondsPassed = 0
constructor() {
makeAutoObservable(this)
}
increaseTimer() {
this.secondsPassed += 1
}
}
const myTimer = new Timer()
const TimerView = observer(({ timer }) => <span>Seconds passed: {timer.secondsPassed}</span>)
function App() {
return (
<TimerView timer={myTimer}></TimerView>
);
}
setInterval(() => {
myTimer.increaseTimer()
}, 1000)
export default App;
我们看到上述的例子其实就是 Mobx 官网的例子，我们把 Mobx 官网的例子跑起来，就说明我们手写的 Mobx 功能是成功的了。上述例子中，我们还需要实现一个函数 observer，我们可以参考上面实现过的 autorun 函数。
我们可以看到 observer 接受的是一个函数组件，返回的也是一个函数组件，那么这就是一个典型的高阶组件，所谓高阶组件，也就是高阶函数，因为函数组件本质就是一个函数。那么我们根据这些特点，我们很容易就构造出 observer 函数基础架构。代码如下：
export function observer(baseComponent) {
return (props) => {
return baseComponent(props)
}
}
页面正常渲染出来了，但还不能自动更新。
从发布订阅的角度来说在 React 应用 Mobx 后，所写的函数组件就是一个订阅者，那么根据我们上面实现的 autorun 函数，我们先要实例化一个 Reaction 对象，而不管在 Vue 中还是 React 中函数组件在更新的时候，都是重新执行整个函数组件的，所以我们实例化的 Reaction 对象需要保存起来，那么在 React 里面有提供了一个 useRef 的 Hook，它可以创建一个 mutable ref 对象，在组件的整个生命周期内该对象保持不变。简单来说就是 useRef 可以创建一个可以保存状态的 Hook，即使组件重新渲染，其内部的值也不会变化。
import { useRef } from "react"
import { Reaction } from "./mini-mobx"
export function observer(baseComponent) {
return (props) => {
const admRef = useRef(null)
if (!admRef.current) {
// 实例化订阅者中介
const reaction = new Reaction(
() => {
// 回调函数中执行依赖收集函数
reaction.track(baseComponent)
}
)
admRef.current = reaction
}
const reaction = admRef.current
// 立即执行
reaction.schedule_()
}
}
页面显示如下：
我们根据 autorun 的实现原理初步实现了上述功能，但报错了，原因是组件的 props 没有传进去，所以我们进行以下修改：
import { useRef } from "react"
import { Reaction } from "./mini-mobx"
export function observer(baseComponent) {
return (props) => {
const admRef = useRef(null)
if (!admRef.current) {
// 实例化订阅者中介
const reaction = new Reaction(
() => {
// 回调函数中执行依赖收集函数
+ reaction.track(() => {
+ baseComponent(props)
+ })
}
)
admRef.current = reaction
}
const reaction = admRef.current
// 立即执行
reaction.schedule_()
}
}
页面显示如下：
我们发现不报错了，但页面并没有渲染，没渲染的原因是我们并没有把函数组件执行的内容返回，所以我们继续进行以下修改：
import { useRef } from "react"
import { Reaction } from "./mini-mobx"
export function observer(baseComponent) {
return (props) => {
+ let renderResult
const admRef = useRef(null)
if (!admRef.current) {
// 实例化订阅者中介
const reaction = new Reaction(
() => {
// 回调函数中执行依赖收集函数
reaction.track(() => {
+ renderResult = baseComponent(props)
})
}
)
admRef.current = reaction
}
const reaction = admRef.current
// 立即执行
reaction.schedule_()
+ return renderResult
}
}
修改后页面显示如下：
经过上面修改，我们的页面可以渲染出来了，但又遇到新的问题了，页面并没有更新。按理来说，我们上面的 observer 是已经根据 autorun 的实现方式进行实现了。我们可以在 Reaction 的回调函数中进行打印，
export function observer(baseComponent) {
return (props) => {
if (!admRef.current) {
const reaction = new Reaction(
() => {
// 回调函数中执行依赖收集函数
reaction.track(() => {
renderResult = baseComponent(props)
+ console.log('renderResult', renderResult)
})
}
)
admRef.current = reaction
}
+ console.log('outer')
}
}
打印显示如下：
我们发现其实我们的 Reaction 的回调函数已经重新执行了，但整个组件函数并没有重新执行，所以并没重新渲染内容。所以我们现在只要考虑把整个组件实现重新渲染就可以了。那么熟悉 React 的同学可能会知道在 React 函数组件中可以通过 useState 改变 state 值来触发组件的重新渲染。这个也是 Vue 和 React 区别非常大的一个地方。那么我们可以在 Reaction 的回调函数中执行更新函数，把依赖收集的相关代码放到外面执行。
代码修改如下：
import { useRef, useState } from "react"
import { Reaction } from "./mini-mobx"
export function observer(baseComponent) {
return (props) => {
+ const [, setState] = useState()
let renderResult
const admRef = useRef(null)
if (!admRef.current) {
// 实例化订阅者中介
const reaction = new Reaction(
() => {
+ // 执行更新
+ setState(Symbol())
}
)
admRef.current = reaction
}
const reaction = admRef.current
+ // 执行依赖收集函数
+ reaction.track(() => {
+ renderResult = baseComponent(props)
+ })
return renderResult
}
}
页面渲染如下：
我们重新修改后，可以正常如期执行了。至此我们手写的 Mobx 也实现了在真实 React 环境中执行了。
总结
本文通过相对比较简洁的代码实现了 Mobx 的核心原理，同时对比了同时响应式的 Vue 和 Mobx 的最大设计区别，在 Vue 中创建的响应式数据，是可以随意在任何地方通过普通属性访问器进行修改的，但 Mobx 中则不提倡这种可以随意修改 state 的方式，在 Mobx 中希望开发者通过 actions 来改变 state，本质是像 React 那样通过一个函数来修改 state，或者说是遵循 Flux 和 Redux 的单向数据流思想。同时 Mobx 中的订阅者中介 Reaction 和 Vue 中的订阅者中介实现则有比较大的区别，主要是因为 Mobx 主要的设计受 React 的影响，在更新的时候需要特别的设置，而不像 Vue 那样直接重新运行副作用函数就可以了，这个说到底也是因为 React 不是靠依赖追踪来实现响应式的缘故。
那么具体 Mobx 的 Reaction 的要这样设计，而不能像 Vue 那样简洁呢，我们下一篇文章中继续探讨。
上述文章写于：2023 年，由于个人原因今年 2026 年发布。
我是程序员Cobyte，现在已转向研究 AI Agent，欢迎添加 v: icobyte，学习交流 AI Agent 应用开发。
