The mobx-share from ckinmind

关于去抖问题（mobx中）

新的一次mobx分享的准备

参考话题

mobx-state-tree
mox-utils
mobx中最火的issue的讨论
万科地产项目中mobx在图表更新中的应用
mobx最佳实践
关于数据联动的最佳实践
updateStore(updateKey)待议

Transaction可以用来批量更新，在事务结束前不会通知任何观察者

新增mobx-state-tree

如何自己实现一个 mobx - 原理解析

参考资料

如何自己实现一个 mobx - 原理解析

要点

mobx最最核心是两个功能
- Observable ，用来包装一个属性为被观察者
- autorun ，用来包装一个方法为观察者
autorun 是个神奇的函数，被他包装过的方法，就会变为观察者函数，并且这里有一个很重要的特性，这个函数只会观察自己依赖到的设为 observable 的值
那如何实现依赖收集呢
- 引申出一个很简单的管理类，我们叫做 dependenceManager，这个工具类中管理了一个依赖的 map，结构是一个全局唯一的 ID 和对应的监听的函数的数组
- 这个全局唯一的 ID 实际上代表的就是各个被设置为 observable 的属性值，是 Observable 类的一个属性 obID
- 当一个被 observable 包装的属性值发生 set 行为的时候，就会触发 dependenceManager.trigger(obID); 从而触发遍历对应的监听函数列表，并且执行，这就是 autorun 的基本原理
那这个依赖的map 是如何收集上来的呢
- 也是 dependenceManager 的操作
- 这里 dependenceManager 标记现在开始收集依赖，然后执行 handler 函数，执行结束之后，标记当前收集结束
每个被 observable 过的值在 get 的时候都会判断当前是否正在收集依赖，如果是的话，就会把这个值和当前正在收集依赖的 handler 关联起来存储在 dependenceManager 中
整个 s-mobx 核心的原理
- observable 包装原生值，get 钩子收集依赖，set 钩子触发改变
- autorun 包装观察者函数，在包装时会提前执行一次，并且触发其中涉及到的 observable 值的 get 钩子收集依赖，将当前的观察者函数对应到每个 observable 值上
Observable
- 包装对象值的 Observable ，核心原理是 Object.defineProperty ，给被包装的属性套上 get 和 set 的钩子，在 get 中响应依赖收集，在 set 中触发监听函数。
- 数组的包装稍微麻烦，在 s-mobx 中使用 Proxy 来包装，但是兼容性不是很好，在 mobx 中，作者自己模拟了一个数组对象的操作，然后包装在原生数组上
- 另外对于 Object 对象，为其进行了递归包装，每一级 Object 都绑定了一个 observable
observer
- 给 react 组件的 prototype 做了一次 mixin，为其加入了一个 autorun，autorun的作用就是绑定组件 render 方法和其依赖的值的观察关系。当依赖的值发生变化的时候会触发 autorun 的参数 handler，handler中会强制执行 render() 方法和 forceUpdate()
decorator
- decorator 的实现其实很简单，不过有些坑需要规避，例如在 decorator 中出现的target，是class 的prototype，而不是class的实例。但是在 return 出来的 descriptor 中，set 和 get 钩子中的this，则是 class 的实例。在实现一些复杂逻辑的时候要注意一下这个点