【mobx-入门与思考】

介绍

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


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

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

吐槽结束,下面继续

运行环境

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

典型用法

import { makeObservable, observable, computed, action } from "mobx"class Doubler {valueconstructor(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 valueconstructor(value) {this.value = value}@computedget double() {return this.value * 2}@actionincrement() {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主旨的思考,掌握其主旨下对应的框架实现,以及基础使用。恭喜你,入门了!🎉

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3017176.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Springboot项目学习之各组件的用法和逻辑结构

1.Controller层(Controller): 也称为前端控制器或请求处理器,它是项目与用户交互的入口。Controller接收HTTP请求,解析请求参数,调用Service层处理业务逻辑,并返回响应给客户端。 Controller通…

pyqt 滑动条控件QSlider

pyqt 滑动条控件QSlider 滑动条控件QSlider效果代码 滑动条控件QSlider QSlider 是 PyQt中的一个控件,它允许用户通过拖动滑块或点击滑块轨道上的任意位置来选择一系列值。 QSlider 有两种主要的类型:Qt.Horizontal(水平滑块)和 …

每日OJ题_贪心算法三⑤_力扣134. 加油站

目录 力扣134. 加油站 解析代码 力扣134. 加油站 134. 加油站 难度 中等 在一条环路上有 n 个加油站,其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一…

CUDA-共享内存法实现矩阵乘法(比常规方案提速一倍)

作者:翟天保Steven 版权声明:著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处 共享内存是什么? 共享内存是在多个处理单元之间共享数据的一种内存区域。在计算机体系结构中,共享内存通…

学QT的第二天~

小黑子鉴别界面 #include "mywidget.h" void MyWidget::bth1() { if(edit3 ->text()"520cxk"&&edit4 ->text()"1314520") { qDebug()<< "你好&#xff0c;真爱粉"; this->close(); } else { speecher->sa…

linux或ubuntu环境下需要自行安装vivado USB Program下载程序驱动

如果在linux或ubuntu环境下&#xff0c;不安装驱动是无法下载FPGA程序的。在linux或ubuntu环境下安装程序不要自动安装。 johnjohn-wang:~/vitis2021.2/Vivado/2021.2/data/xicom/cable_drivers/lin64/install_script/install_drivers$ sudo ./install_drivers

java—异常

异常 什么是异常 异常的体系 编译时异常处理方式 1、选择报错的整个代码块&#xff0c;快捷键crtlaltt键&#xff0c;选择try/catch将代码围起来。 2、编译异常处理方式2 在main方法上抛出异常 自定义异常 例子&#xff1a; 自定义运行时异常 自定义编译时异常 异常…

【快速幂取模】

求 a 的 b 次方对 p 取模的值&#xff0c;其中 1≤a,b,p≤109 输入 三个用空格隔开的整数a,b和p。 输出 一个整数&#xff0c;表示ab mod p的值。 样例输入 Copy 2 3 9样例输出 Copy 8 思路&#xff1a; 这里借鉴一下大佬的用例&#xff1a; #include<bits/stdc.h&…

【每日刷题】Day33

【每日刷题】Day33 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; 2. 445. 两数相加 II - 力扣&#xff08;…

腾讯突然宣布,微信鸿蒙版要来了!

今年初&#xff0c;华为宣布HarmonyOS NEXT命名为“鸿蒙星河版”&#xff0c;并计划在二季度启动开发者 Beta 计划&#xff0c;四季度发布商用正式版。 消息一出&#xff0c;不少人为之振奋。 鸿蒙星河版因不再兼容安卓开源应用&#xff0c;仅支持鸿蒙内核和系统的应用&#x…

⚡REST 和 SOAP 协议有什么区别?

原文链接&#xff1a;https://document360.com/blog/rest-vs-soap/ API 是应用程序编程接口&#xff08;Application Programming Interface&#xff09;的缩写。API 规定了不同的软件组件应如何以编程方式进行交互和通信。 最常见的 API 类型就是 Web API。网络应用&#xff…

Scroll生态项目Penpad,再获Presto Labs的投资

Penpad是Scroll生态的LaunchPad平台&#xff0c;其整计划像收益聚合器以及RWA等功能于一体的综合性Web3平台拓展&#xff0c;该平台在近期频获资本市场关注&#xff0c;并获得了多个知名投资者/投资机构的支持。 截止到本文发布前&#xff0c;Penpad已经获得了包括Scroll联合创…

通信录的动态版本

一. 增加需求 在学习了动态开辟内存之后 我们对于通讯录产生了新的需求 要求我们做出一个动态增长的版本 即 随着我们储存联系人的增加 储存的空间增加 要求 &#xff1a; 1 初始空间为3 2 每次达到上限之后 扩容两个内存 二. 动手实施 我们首先要创建一个结构体 结构体…

领航法律科技,法大大多年深耕再获认可!

近日&#xff0c;“乘势破局 第八届新兴法律服务业高峰论坛”在上海隆重举行。作为国内领先的电子签厂商&#xff0c;法大大凭借在法律科技领域的多年深耕与沉淀&#xff0c;荣获“法律科技领航机构”称号。 据悉&#xff0c;新兴法律服务业高峰论坛作为国内首个聚焦“新兴法律…

每日一题(PTAL2):列车调度--贪心+二分

选择去维护一个最小区间 代码1&#xff1a; #include<bits/stdc.h> using namespace std; int main() {int n;cin>>n;int num;vector <int> v;int res0;for(int i0;i<n;i){cin>>num;int locv.size();int left0;int rightv.size()-1;while(left<…

【计组OS】访存过程以及存储层次化结构

苏泽 本专栏纯个人笔记作用 用于记录408 学习的笔记记录&#xff08;敲了两年码实在不习惯手写笔记了&#xff09; 如果能帮助到大家当然最好 但由于是工作后退下来备考 很多说法和想法都会结合实际开发的思想 可能不是那么的纯粹应试哈 希望大家挑选自己喜欢的口味食用…

什么牌子的骨传导耳机质量好?五大宝藏热门机型测评对比!

我作为一名音乐发烧友&#xff0c;对各类耳机产品都有深入的了解&#xff0c;最近也经常被人问及骨传导耳机哪个牌子好。通过交流&#xff0c;我发现很多人在选择骨传导耳机的时候&#xff0c;都有出现踩坑的情况&#xff0c;这也难怪&#xff0c;随着骨传导耳机热度逐渐增加&a…

【计算机毕业设计】基于SSM++jsp的网络游戏公司官方平台系统【源码+lw+部署文档+讲解】

目录 第1章 绪论 1.1 课题背景 1.2 课题意义 1.3 研究内容 第2章 开发环境与技术 2.1 MYSQL数据库 2.2 JSP技术 2.3 SSM框架 第3章 系统分析 3.1 可行性分析 3.1.1 技术可行性 3.1.2 经济可行性 3.1.3 操作可行性 3.2 系统流程 3.2.1 操作流程 3.2.2 登录流程 3.2.3 删除信息流…

【记录】Latex|解决 ACM-Reference-Format 顺序不符合论文实际引用顺序的问题

参考&#xff1a; Sort References by Order of Appearance with LaTeX/BibTeXOrdering reference in bibTex - StackOverflow 文章目录 问题描述解决方案 省流版解决方案 完整版《用LaTeX/BibTeX按出现顺序排序参考文献》1. 概述2. LaTeX 和 BibTeX3. 使用 LaTeX 进行参考文…