【mobx-入门与思考】

介绍

mobx 是 nodejs生态中的框架，主要用于做状态管理，可以监控变量状态的变化。
nodejs中除了mobx，还有个redux，也是做状态管理的，都是比较成熟的框架，二者的选择可以参考【nodejs状态管理: Redux VS Mobx】

mobx整体还是可用的，但还是忍不住吐槽下，

官方文档，有些部分介绍的很抽象，有些tip和使用上，说了很多，但是很难理解，反而容易绕进去。
越升级越不直观，mobx5→6 有些之前比较好用的语法糖反而没有了。

吐槽结束，下面继续

运行环境

前后端都能用，Nodejs环境或浏览器中都能用。

典型用法

import { makeObservable, observable, computed, action } from "mobx"

class Doubler {
    value

    constructor(value) {
        makeObservable(this, {
            value: observable,
            double: computed,
            increment: action,
        })
        this.value = value
    }

    get double() {
        return this.value * 2
    }

    increment() {
        this.value++
    }
}

mobx 主旨

mobx用于状态变化管理，管理就涉及到状态的改变和状态的监控，mobx根据实际场景，引申抽象了如下概念，

Actions(动作)
State(状态)
Derivations(派生)
Reactions (变化)

举个例子：

场景：一款前端h5角色扮演小游戏，当你按上键的时候，看到主角向上移动，同时会记录移动的步数。

这里向上移动就是Action，改变的是主角位置State，记录移动步数就是由State变化引起的Derivations派生，看到画面的变化就是Reactions。

木乃伊迷宫

四者关系

关系示意图

看图说话， Action导致State变化，影响Reactions。
如果有派生，则也会导致派生变化，最终影响Reactions。
从数据变化的角度，有2条路线

action → state → reaction
action → state → computed value → reaction

mobx 实践如何用

主旨和用法的对照

上面我们知道了 mobx的设计主旨，看下对应mobx的实践使用。主旨中提到的4个部分，对应到mobx框架，以及代码里。

Action： mobx action
State：mobx observeable
Computed: mobx computed
Reactions: 这部分是要你自己组合的逻辑，比如数据变了，使用react或者vue进行新的页面渲染。

下面继续介绍下mobx框架中action，observeable，computed的使用示例。

示例

基础写法

import { observable, computed, action, makeObservable, autorun} from "mobx";

class Doubler {
    value: number;

    constructor(value) {
        makeObservable(this, {
            value: observable,
            double: computed,
            increment: action,
        })
        this.value = value
    }

    get double() {
        return this.value * 2
    }

    increment() {
        this.value++
    }
}

let d = new Doubler(1);
autorun(() => {
    console.log(`value changed to : ${d.value}`)
    console.log(`value.double changed to : ${d.double}`)
});
d.increment();

注意：建议对observable字段的修改(value)，最好通过在action(increment)里面完成。

// 运行 npx tsx Doubler.ts ，输出
value changed to : 1
value.double changed to : 2
value changed to : 2
value.double changed to : 4

装饰器写法

import { observable, computed, action, autorun } from "mobx"

class Doubler {
    @observable accessor value

    constructor(value) {
        this.value = value
    }

    @computed
    get double() {
        return this.value * 2
    }

    @action
    increment() {
        this.value++
    }

}

let d = new Doubler(1);
autorun(() => {
    console.log(`value changed to : ${d.value}`)
});
d.increment();

PS：这种写法看起来最优雅，但是实际上autorun 捕捉不到第二次value的变化，不知道是我本地mobx库版本，还是ts编译的问题。有知道的小伙伴，欢迎评论区留言。

自动装配


import { autorun, makeAutoObservable } from "mobx"

function createDoubler(value) {
    return makeAutoObservable({
        value,
        get double() {
            return this.value * 2
        },
        increment() {
            this.value++
        }
    })
}

let d = createDoubler(1);
autorun(() => {
    console.log(`value changed to : ${d.value}`)
    console.log(`value.double changed to : ${d.double}`)
});
d.increment();

或

import { autorun, makeAutoObservable } from "mobx"

class Doubler {
  value = 1;
  get double() { return this.value * 2; }
  increment() { this.value++; }

  constructor() {
    makeAutoObservable(this);
  }
}

let d = new Doubler();
autorun(() => {
    console.log(`value changed to : ${d.value}`)
    console.log(`value.double changed to : ${d.double}`)
});
d.increment();

当使用自动装配，不用显示的声明observable，computed，action等。 mobx会自动的根据函数的特征来判断，所有的属性都会被定义为observable，get开头的会被认为computed的，改变属性的函数被认为是action。