【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://www.mzph.cn/pingmian/7713.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mac电脑如何安装python及环境搭建

(1)进入官网:Download Python | Python.org,根据自己电脑选择python (2)这里我选择的是mac,点击:macos,选择最近版本并点击进入 (3)选择mac版本: (4)点击就可以进入下载: (5)下载好之…

京东工业优选商品详情API接口:解锁高效工业采购新体验

京东工业优选的商品详情API接口,允许开发者通过程序化的方式,快速获取平台上的商品详细信息。这些详细信息包括但不限于商品名称、价格、规格、库存、图片、评价等,为企业提供全方位的商品信息查询服务。 二、API接口的主要功能 实时查询&a…

Baidu Comate——您的智能编码伙伴

文章目录 1.Baidu Comate智能编码助手简介2.Baidu Comate安装使用3.查看Comate插件功能4.Baidu Comate基础功能介绍✨注释生成代码✨实时续写✨函数注释✨行间注释✨代码解释✨单元测试生成✨代码优化✨技术问答 5.使用体验结语 1.Baidu Comate智能编码助手简介 ✨Baidu Comat…

电脑装了两个Win10系统,怎么修改其名称方便识别?

前言 有小伙伴在上一期的双系统教程上留言说怎么修改双系统引导时候显示的名称 不然看起来两个系统好像都没啥分别,如果是Windows10Windows11的方案还好说,但如果是两个Windows10或者是两个Windows11,有时候还真的很不好分辨。 万一想要启动…

Candance画运算放大器

根据拉扎维《模拟CMOS集成电路设计》第九章第一个放大器进行搭建电路图。 此电路图中两个NMOS栅极互联是因为NMOS的衬底要接片上最低电压。所以要两个互联并接到最低点。 因为两条支路上的器件都是一样的,所以这两条路平分idc的直流电流。 测试的时候要加上下图这两…

【Ajax零基础教程】-----第一课 Ajax简介

一、什么是ajax ajax即 Asynchronous javascript And XML (异步 javaScript 和 XML) 是一种创建交互式,快速动态应用的网页开发技术,无需重新加载整个网页的情况下,能够更新页面局部数据的技术。 二、为什么使用Ajax 通过在后台与服务器进行少…

天锐绿盾 | 办公加密系统,源代码防泄密、源代码透明加密、防止开发部门人员泄露源码

天锐绿盾作为一款专注于数据安全与防泄密的专业解决方案,它确实提供了针对源代码防泄密的功能,帮助企业保护其核心的知识产权。 PC地址: https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee 以下是天锐绿盾可能采…

值得收藏!修复Windows 10/11中找不到输出或输入设备的五种方法

序言 这篇文章主要关注处理声音输出/输入设备未发现的问题。它提供了许多可行的方法,帮助了许多Windows用户。阅读以下内容以找到你的解决方案。 最近,我将Windows 10更新到21H2,发现我的音频无法工作。当我把鼠标放在任务栏上的声音图标(上面有一个十字图标)上时,它会…

6.Nginx

Nginx反向代理 将前端发送的动态请求有Nginx转发到后端服务器 那为何要多一步转发而不直接发送到后端呢? 反向代理的好处: 提高访问速度(可以在nginx做缓存,如果请求的是同样的接口地址,这样就不用多次请求后端&#…

TCP经典异常问题探讨与解决

作者:kernelxing TCP的经典异常问题无非就是丢包和连接中断,在这里我打算与各位聊一聊TCP的RST到底是什么?现网中的RST问题有哪些模样?我们如何去应对、解决?本文将从RST原理、排查手段、现网痛难点案例三个板块自上而…

鸿蒙编译子系统详解(二)main.py

1.5.4源码解析 1.5.4.1 build/hb/main.py脚本 这个脚本是编译的主程序脚本,流程如下: 首先是初始化各种module类,然后运行对应模块。 hb分为build,set,env,clean,tool,help几个模块,模块源码位于build/hb/modules/目录下&#xff…

ctfshow——SSRF

文章目录 web 351web 352web 353web 354web 355web 356web357web 358web 359web 360 SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下,SSRF攻击的目标是从外网无法访问的内部系统…

python实现的信号合成分析系统(DSP)

python实现的信号合成分析系统(DSP) 流程 1、在QT界面上设置好信号频率,采样频率,采样点数 2、使用np构建sin函数 3、使用matplotlib画出 4、分别分析合成信号的FFT频域信息1、效果图 2、示例代码 def btn_com_clicked(self):# 信号合成分析Fs = self.com_fs_edit_value #…

C++程序设计教案

文章目录: 一:软件安装环境 第一种:vc2012 第二种:Dev-C 第三种:小熊猫C 二:语法基础 1.相关 1.1 注释 1.2 换行符 1.3 规范 1.4 关键字 1.5 ASCll码表 1.6 转义字符 2.基本框架 2.1 第一种&…

巨控GRM561/562/563/564Q杀菌信息远程监控

摘要 通过程序编写、手机APP画面制作等运行系统,实现电脑及手机APP显示的历史曲线画面和数据图形化的实时性。 不仅流程效率提升90%以上,同时为杀菌生产提供有利的质量保障,还有效规避因触屏及内存卡的突发异常导致历史数据的丢失&#xff0…

Web实操(6),基础知识学习(24~)

1.[ZJCTF 2019]NiZhuanSiWei1 (1)进入环境后看到一篇php代码,开始我简单的以为是一题常规的php伪协议,多次试错后发现它并没有那么简单,它包含了基础的文件包含,伪协议还有反序列化 (2&#x…

streamlit通过子目录访问

运行命令: streamlit hello 系统默认使用8501端口启动服务: 如果想通过子目录访问服务,可以这么启动服务 streamlit hello --server.baseUrlPath "app" 也可以通过以下命令换端口 streamlit hello --server.port 9999 参考&…

Python - pyplot 画一个漂亮的饼图 Pie charts

目录 一.引言 二.颜色选择 三.绘制饼图 四.总结 一.引言 因工作需求,需要绘制一些数据的饼图,使用默认的颜色绘制不够美观,下面我们找一些好看的颜色美化一些饼图。 二.颜色选择 我们根据 plt 给出的一些好看颜色对应的编码即可为每一个…

HackMyVM-Animetronic

目录 信息收集 arp nmap nikto whatweb WEB web信息收集 feroxbuster steghide exiftool hydra ssh连接 提权 系统信息收集 socat提权 信息收集 arp ┌──(root㉿0x00)-[~/HackMyVM] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 08:00:27:9d:6d:7…

【无标题】程序设计和c语言-谭浩强配套(适合专升本)

一晃大半年没更新了,一直在备考,想着这几天把前段时间学的c语言给大家分享一下,在此做了一个专栏,有需要的小伙伴可私信获取。 说明:本专栏所有内容皆适合专升本复习资料,本人手上也有日常刷题整理的错题以…