认识一下Mobx

[LuckyFBB]

前言

在之前的文章中，我们讲述了 React 的数据流管理，从 props → context → Redux，以及 Redux 相关的三方库 React-Redux。

那其实说到 React 的状态管理器，除了 Redux 之外，Mobx 也是应用较多的管理方案。Mobx 是一个响应式库，在某种程度上可以看作没有模版的 Vue，两者的原理差不多

先看一下 Mobx 的简单使用，线上示例

export class TodoList {
  @observable todos = [];

  @computed get getUndoCount() {
    return this.todos.filter((todo) => !todo.done).length;
  }
  @action add(task) {
    this.todos.push({ task, done: false });
  }
  @action delete(index) {
    this.todos.splice(index, 1);
  }
}

Mobx 借助于装饰器来实现，是的代码更加简洁。使用了可观察对象，Mobx 可以直接修改状态，不用像 Redux 那样写 actions/reducers

Mobx 的执行流程，一张官网结合上述例子的图

简单概括一下，一共有如下几个步骤

1. 页面事件(生命周期/事件函数等)触发 action 执行
2. 通过 action 来修改状态 state
3. 状态 state 更新之后，computed 技术属性会根据依赖属性重新计算值
4. 状态 state 更新之后会触发 reactions，响应这次状态变化进行对应操作

Mobx核心概念

observable

给数据对象添加可观测的功能，支持任何的数据结构

const todos = observable([{
  task: "Learn Mobx",
  done: false
}])

// 更多的采用装饰器的写法
class Store {
  @observable todos = [{
    task: "Learn Mobx",
    done: false
  }]
}

computed

在 Redux 中，一个值 A 是根据 B/C/D 计算出来的，实现思路有以下几种:

• 在我们更改 B/C/D 数据的地方都分别计算一下 A 值，再存储到 store 中
• 在组件中需要使用 A 值时，我们再去根据 B/C/D 去计算，把逻辑和组件耦合在一起

在 Mobx 中，再需要完成上述的需求可以直接使用 computed，它是基于现有状态和计算值演算出来的值。一旦其中用到的状态或者计算值改变，它也会跟着发生变化。

一旦 todos 的发生改变，getUndoCount 就会自动计算

export class TodoList {
  @observable todos = [];

  @computed get getUndoCount() {
    return this.todos.filter((todo) => !todo.done).length;
  }
}

action

动作是任何用来修改状态的东西。MobX 中的 action不像 redux 中是必需的，把一些修改state 的操作都规范使用 action 做标注。

在 MobX 中可以随意更改todos.push({title:'coding', done: false})，state 也是可以有作用的，但是这样杂乱无章不好定位是哪里触发了 state 的变化，建议在任何更新observable或者有副作用的函数上使用 actions。

在严格模式useStrict(true)下，强制使用action

// 非action使用
<button  onClick={() => todoList.add(this.inputRef.value)}>
  Add New Todo
</button>

// action使用
<button onClick={() => todoList.add(this.inputRef.value)}>
  Add New Todo
</button>

class TodoList {
  @action add(task) {
    this.todos.push({ task, done: false });
  }
}

reaction & autorun

1. autorun

   接受一个函数，当这个函数中依赖的可观察属性发生变化的时候，autorun里面的函数就会被触发。除此之外，autorun里面的函数在第一次会立即执行一次。

   autorun(() => {
     console.log("Current name : " + this.props.myName.name);
   });
   
   // 追踪函数外的间接引用不会生效
   const name = this.props.myName.name;
   autorun(() => {
     console.log("Current name : " + name);
   });

2. reaction

   功能和 autorun 类似，但是 autorun 会立即执行一次，但是 reaction 不会。使用 reaction 可以监听到指定的数据变化执行一些操作。

   reaction(
     () => this.props.todoList.getUndoCount,
     (data) => {
       console.log("Current count : ", data);
      }
   );

observer

使用 Redux 时，我们会引入 React-Redux 的 connect 函数，使得我们的组件能够通过 props 获取到 store 中的数据

在 Mobx 中也是一样的知道，我们需要引入 observer 将组件变为响应式组件

包裹React组件的高阶组件，在组件的render函数中任何使用的observable发生变化时，组件都会调用 render 自重新渲染，更新 UI

⚠️ 不要放在顶层Page，如果一个state改变，整个 Page 都会 render，所以 observer 尽量取包裹小组件

@observer
export default class TodoListView extends Component {
  render() {
    const { todoList } = this.props;
    return (
      <div className="todoView">
        <div className="todoView__list">
          {todoList.todos.map((todo, index) => (
            <TodoItem
              key={index}
              todo={todo}
              onDelete={() => todoList.delete(index)}
            />
          ))}
        </div>
      </div>
    );
  }
}

Mobx原理实现

首先我们先明确，Mobx 实现响应式数据，采用了Object.defineProperty或者Proxy

上面讲述到使用 autorun 会在第一次执行并且依赖的属性变化时也会执行。

const user = observable({ name: "FBB", age: 24 })
autorun(() => {
  console.log(user.name)
})

当我们使用 observable 创建了一个可观察对象user，autorun 就会去监听user.name是否发生了改变。等于user被 autorun 监控了，一旦有任何变化就要去通知它

user.watchers.push(wacth)
// 一旦user的数据发生了改变就要去通知监听者
user.watchers.forEach(wacth => wacth())

observable

装饰器一般接受三个参数: 目标对象、属性、属性描述符

通过上面的分析，通过 observable 创建的对象都是可观察的，也就是创建对象的每个属性都需要被观察

每一个被观察对象都需要有自己的订阅方法数组

const cat = observable({name: "tom"})
const mice = observable({name: "jerry"})
autorun(function func1 (){
    console.log(`${cat.name} and ${mice.name}`)
})
autorun(function func2(){
    console.log(mice.name)
})

对于上述代码来说，cat 的watchers只有[func1]，mice 的watchers则有[func1,func2]

简单实现一下 observable，使用 id 来区分被创建的类

let observableId = 0

class Observable {
    id = 0
    value: any;
    constructor(v) {
        this.id = observableId++;
        this.value = v;
    }
    get() {
        return this.value
    }
    set(v) {
        this.value = v
    }
}

实现一个简单的装饰器，需要拦截我们属性的get/set方法，get/set方法需要在 Observable 中实现，并且和 autorun 有密切关联

function observable(target, name, descriptor) {
    const v = descriptor.initializer.call(this);
    const o = new Observable(v);
    return {
        enumerable: true,
        configurable: true,
        get: function () {
            return o.get();
        },
        set: function (v) {
            return o.set(v);
        }
    }
}

在上面 Observable 类中的get/set方法还未写完。在调用属性的get方法时，会将 autorun的函数收集到当前 id 的 watchers 中；而属性的set方法则是去通知所有的watchers，触发对应的函数

那这这里其实我们还需要借助一个类，也就是依赖收集类DependenceManager

let observableId = 0

class Observable {
    id = 0
    value: any;
    constructor(v) {
        this.id = observableId++;
        this.value = v;
    }
    get() {
        dependenceManager.collect(this.id)
        return this.value
    }
    set(v) {
        this.value = v
        dependenceManager.trigger(this.id)
    }
}

autorun

前面说到 autorun 会立即执行一次，并且会将函数收集起来，存储到对应的observable.id的watchers中。autorun 实现了收集依赖，执行对应函数。再执行对应函数的时候，会调用到对应observable对象的get方法，来收集依赖

export default function autorun(handler) {
    dependenceManager.beginCollect(handler)
    handler()
    dependenceManager.endCollect()
}

实现DependenceManager类:

• beginCollect: 标识开始收集依赖，将依赖函数存到一个类全局变量中
• collect(id): 调用get方法时，将依赖函数放到存入到对应 id 的依赖数组中
• trigger: 当执行set的时候，根据 id 来执行数组中的函数依赖
• endCollect: 清除刚开始的函数依赖，以便于下一次收集

class DependenceManager {
    _store = {}
    static Dep: any;
    beginCollect(handler) {
        DependenceManager.Dep = handler
    }
    collect(id) {
        if (DependenceManager.Dep) {
            this._store[id] = this._store[id] || {}
            this._store[id].watchers = this._store[id].watchers || []
            this._store[id].watchers.push(DependenceManager.Dep);
        }
    }
    trigger(id) {
        const store = this._store[id];
        if (store && store.watchers) {
            store.watchers.forEach(watch => {
                watch.call(this);
            })
        }
    }
    endCollect(){
        DependenceManager.Dep = null
    }
}

一个简单的 Mobx 框架都搭建好了~

computed

computed 的三个特点:

• computed 方法是一个 get 方法，会缓存上一次的值
• computed 会根据依赖的属性重新计算值
• 依赖 computed 的函数也会被重新执行

发现 computed 的实现大致和 observable 相似，从第二条和第三条可以推断出 computed 需要两次收集依赖，一次是收集 computed 所依赖的属性，一次是依赖 computed 的函数

首先定义一个 computed 方法，是一个装饰器

export function computed(target: any, name: any, descriptor: any) {
    const getter = descriptor.get; // get 函数
    const computed = new Computed(target, getter);

    return {
        enumerable: true,
        configurable: true,
        get: function () {
            return computed.get();
        }
    };
}

实现 Computed 类，和 Observable 类差不多

let id = 0
class Computed {
    id: number;
    target: any;
    getter: any;
    constructor(target: any, getter: any) {
        this.id = id++
        this.target = target
        this.getter = getter
    }
    get() {
        dependenceManager.collect(this.id);
    }
}

在执行 get 方法的时候，我们和之前一样，去收集一下依赖 computed 的函数，丰富 get 方法

class Computed {
    registerReComputed() {
        if (!this.hasBindAutoReCompute) {
            this.hasBindAutoReCompute = true;
            dependenceManager.beginCollect(this._reComputed, this);
            this._reComputed();
            dependenceManager.endCollect();
        }
    }
    _reComputed() {
        this.value = this.getter.call(this.target);
        dependenceManager.trigger(this.id);
    }
    get() {
        this.registerReComputed()
        dependenceManager.collect(this.id);
        return this.value
    }
}

observer

observer 相对实现会简单一点，其实是利用 React 的 render 函数对依赖进行收集，我们采用在 componnetDidMount 中调用 autorun 方法

export function observer(target: any) {
    const componentDidMount = target.prototype.componentDidMount;
    target.prototype.componentDidMount = function () {
        componentDidMount && componentDidMount.call(this);
        autorun(() => {
            this.render();
            this.forceUpdate();
        });
    };
}

至此一个简单的 Mobx 就实现了，线上代码地址

Mobx vs Redux

1. 数据流

   Mobx 和 Redux 都是单向数据流，都通过 action 触发全局 state 更新，再通知视图

   Redux 的数据流

   

   Mobx 的数据流

   

2. 修改数据的方式

   他们修改状态的方式是不同的，Redux 每一次都返回了新的 state；Mobx 每次修改的都是同一个状态对象，基于响应式原理，get时收集依赖，set时通知所有的依赖

   当 state 发生改变时，Redux 会通知所有使用 connect 包裹的组件；Mobx 由于收集了每个属性的依赖，能够精准通知

   当我们使用 Redux 来修改数据时采用的是 reducer 函数，函数式编程思想；Mobx 使用的则是面向对象代理的方式

3. Store 的区别

   Redux 是单一数据源，采用集中管理的模式，并且数据均是普通的 JavaScript 对象。state 数据可读不可写，只有通过 reducer 来改变

   Mobx 是多数据源模式，并且数据是经过observable包裹的 JavaScript 对象。state 既可读又可写，在非严格模式下，action 不是必须的，可以直接赋值

总结

本文从 Mobx 的简单示例开始，讲述了一下 Mobx 的执行流程，引入了对应的核心概念，然后从零开始实现了一个简版的 Mobx，最后将 Mobx 和 Redux 做了一个简单的对比

参考链接

• 从零实现 Mobx：深入理解 Mobx 原理
• MobX 实现原理揭秘
• 引入Mobx
• 实现一个简单的 MobX
• 用故事解读 MobX源码