跳到主要内容

认识

2024年02月26日
柏拉文
越努力，越幸运

一、认识​

Mobx 采用了一种观察者模式—— Observer，整个设计架构都是围绕 Observer 展开:

  1. 在 mobx 的状态层，每一个需要观察的属性都会添加一个观察者，可以称之为 ObserverValue

  2. 有了观察者，那么就需要向观察者中收集 listener ，mobx 中有一个 Reaction 模块，可以对一些行为做依赖收集，在 React 中，是通过劫持 render 函数执行行为，进行的依赖收集。

  3. 如何监听改变，用自定义存取器属性中的 get 和 set ，来进行的依赖收集和更新派发，当状态改变，观察者会直接精确通知每个 listener 。

二、思想​

2.1 状态提升​

在正常情况下，在 React 应用中使用 Mobx ，本质上 mobx 里面的状态，并不是存在 React 组件里面的，是在外部由一个个 mobx 的模块 model 构成，每一个 model 可以理解成一个对象，状态实质存在 model 中，model 状态通过 props 添加到组件中，可以用 mobx-react 中的 Provider 和 inject 便捷获取它们，虽然 mobx 中响应式处理这些状态，但是不要试图直接修改 props 来促使更新，这样违背了 React Prop 单向数据流的原则。正确的处理方法，还是通过 model 下面的 action 方法，来改变状态，React 实质上调用的是 action 方法。

2.2 观察者模式​

Mobx 采用了一种观察者模式—— Observer，整个设计架构都是围绕 Observer 展开:

  1. 在 mobx 的状态层，每一个需要观察的属性都会添加一个观察者，可以称之为 ObserverValue

  2. 有了观察者，那么就需要向观察者中收集 listener ，mobx 中有一个 Reaction 模块，可以对一些行为做依赖收集，在 React 中，是通过劫持 render 函数执行行为，进行的依赖收集。

  3. 如何监听改变，用自定义存取器属性中的 get 和 set ，来进行的依赖收集和更新派发，当状态改变，观察者会直接精确通知每个 listener 。

2.3 装饰器模式​

为了建立观察者模式，便捷地获取状态/监听状态，mobx 很多接口都支持装饰器模式的写法。所以在 mobx 中，装饰器模式是最常用的写法:

class Root{
    @observable name = 'alien' /* 建立观察者name属性 */
    @action setName(name){  this.name = name   }  /* 改变 name 属性 */
}

三、工作流​

3.1 初始化​

首先就是 mobx 在初始化的时候，是如何处理 observable 可观察属性的。

3.2 依赖收集​

3.3 派发更新​

最后就是当改变可观察属性的值的时候，如何更新对应组件的。

四、Redux Vs Mobx​

Mobx 基于观察者模式, 依赖于 Proxy， Object.defineProperty 等来实现数据劫持, 进而实现依赖收集和派发更新。可以多个 store, 每一个 store 都是相互独立的。

Redux 基于发布订阅的模式, 创建一个 store, 保存状态信息。 React应用的 state 统一放在store里面维护，当需要修改state的时候，dispatch一个 action 给reducer，reducer算出新的state后，再将state发布给事先订阅的组件。所有对状态的改变都需要dispatch一个action，通过追踪action，就能得出state的变化过程。整个数据流都是单向的，可检测的，可预测的。整体数据流向简单。