美文网首页
【mobx-入门与思考】

【mobx-入门与思考】

作者: wn777 | 来源:发表于2024-05-06 21:41 被阅读0次

    介绍

    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根据实际场景,引申抽象了如下概念,

    1. Actions(动作)
    2. State(状态)
    3. Derivations(派生)
    4. 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。

    结语

    以上便是对于mobx入门与思考,通过对mobx主旨的思考,掌握其主旨下对应的框架实现,以及基础使用。恭喜你,入门了!🎉

    相关文章

      网友评论

          本文标题:【mobx-入门与思考】

          本文链接:https://www.haomeiwen.com/subject/feqrfjtx.html