React中使用mobx管理状态数据使用样例

MobX 是一个身经百战的库,它通过运用透明的函数式响应编程(Transparent Functional Reactive Programming,TFRP)使状态管理变得简单和可扩展。官网地址:关于 MobX | MobX中文文档 | MobX中文网

安装依赖

mobx-react-lite是一个mobx和react建立链接的依赖库,也必须安装才可以使用

yarn add mobx yarn add mobx-react-lite

创建一个或者多个store

并使用store/index.js统一管理,这样以后只需要使用统一的一种方式就可以了

CountStore.js:一个存储数据的store

import { makeAutoObservable } from "mobx"class CountStore {count = 0constructor() {makeAutoObservable(this)}addCount = () => {this.count++}
}export default CountStore

统一管理的index.js:

import CountStore from "./count";
import MyInfo from "./info";
import React from "react";class Store {constructor() {this.countStore = new CountStore()this.myInfo = new MyInfo()}
}// 使用context是为了让react识别到Store里面的mobx,不然react不认识Store
const rootStore = new Store()
const context = React.createContext(rootStore)
export const useStore = () => React.useContext(context)

在组建中使用

像使用hooks一样使用store,也可以使用解构赋值的形式,将countStore解构出来:

import React from 'react'
import { useStore } from './store'
import { observer } from 'mobx-react-lite'function App() {const { countStore, myInfo } = useStore()return (<div><h2>APP组件</h2><div className="count-box">count状态: {countStore.count}<button onClick={countStore.addCount}>+</button></div><div>myinfo状态: {myInfo.myCar.join('++')}myAge状态: {myInfo.FilterAge.join('||')}<button onClick={myInfo.addCar}>修改内容</button></div></div>)
}export default observer(App)

使用效果

可以在React组建中调试查看数据,找到对应的组件,然后查看Hooks下Context属性,找到里面有store的那个,然后打开,即可查看里面存储的数据

 

 

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

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

相关文章

QT的信号槽的四种写法和五种链接方式

目录 四种信号槽写法&#xff1a; 五种连接方式&#xff1a; 实例&#xff1a; 常见错误及改正&#xff1a; 错误1: 未连接信号与槽 错误2: 信号和槽参数不匹配 错误3: 未使用Q_OBJECT宏 错误4: 跨线程连接未处理 在Qt中&#xff0c;信号&#xff08;Signal&#xff09…

openEuler-OECA考试报名火热开启,尊享半价优惠 作者:HopeInfra 发布时间:2023-08-10

近日&#xff0c;润和软件人才评定报名系统已成功上线运行&#xff0c;现openEuler-OECA人才评定考试报名优惠活动火热开启&#xff0c;欢迎大家报名咨询&#xff01; 关于openEuler人才评定 随着openEuler及其发行版本在各个行业使用量逐年增多&#xff0c;相关人才的评定诉求…

企业内业务系统与Activiti流程引擎的结合(十)

书接上回 Activiti流程接口中台 接口实现 一、任务指派(委托) /task/instance/{taskId}/reassign 查询 activiti 相关表 本方法使用的全部是 activiti 自带的API 1. 请求参数 {"assigneeId": "000001", "tenantId": "abcd" } …

突破笔试:力扣129. 求根节点到叶节点数字之和

1. 题目链接&#xff1a;129. 求根节点到叶节点数字之和 给你一个二叉树的根节点 root &#xff0c;树中每个节点都存放有一个 0 到 9 之间的数字。每条从根节点到叶节点的路径都代表一个数字&#xff1a;例如&#xff0c;从根节点到叶节点的路径 1 -> 2 -> 3 表示数字 …

http相关知识点

文章目录 长链接http周边会话保持方案1方案2 基本工具postmanFiddlerFiddler的原理 长链接 一张网页实际上可能会有多种元素组成&#xff0c;这也就说明了网页需要多次的http请求。可由于http是基于TCP的&#xff0c;而TCP创建链接是有代价的&#xff0c;因此频繁的创建链接会…

理解 with torch.no_grad():

在看深度学习预测推理的代码时&#xff0c;经常会看到下面这行代码 with torch.no_grad&#xff08;&#xff09;&#xff1a;年少无知的我不知道是什么意思。今天问了一下GPT&#xff0c;给出的答案是这样的&#xff1a; 在 PyTorch 中&#xff0c;torch.no_grad() 是一个上…

大数据Flink(五十六):Standalone伪分布环境(开发测试)

文章目录 Standalone伪分布环境(开发测试) 一、架构图 二、环境准备 三、下载安装包</

flutter遇到的小问题记录

flutter-getx的Get.bottomSheet组件改变高度 Get.bottomSheet( isScrollControlled: true,) isScrollControlled: true 就是控制高度 (无语) 截取视频第一针 返回的是本地url 或者Uint8List的数据 String? videoStr await VideoThumbnail.thumbnailFile(video: videoPath,…

微信小程序 map地图(轨迹)

allMarkers效果图 废话少说直接上马&#xff08;最后是我遇到的问题&#xff09; cover-view是气泡弹窗&#xff0c;可以自定义弹窗&#xff0c;要配合js&#xff1a;customCallout&#xff0c;如果是非自定义的话&#xff1a;callout&#xff08;可以修改颜色、边框宽度、圆角…

java输出GB2312、GBK、GB18030、UTF-8所有的字符

相关文章 【转】彻底搞明白 GB2312、GBK 、GB18030和UTF-8 1.ASICII、GB2312、GBK、GB18030 以及 UTF8 的关系 2.编写代码 引入依赖&#xff1a;hutool工具类 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId>&…

轻松批量自定义重命名,为文件夹加上个性化编号!

在日常生活和工作中&#xff0c;我们经常需要对大量的文件夹进行重命名&#xff0c;以更好地管理和整理文件。然而&#xff0c;手动逐个修改文件夹名称费时费力&#xff0c;效率低下。现在&#xff0c;我们为您推荐一款简单易用的工具&#xff0c;可以帮助您快速批量自定义重命…

LoRaWAN网关与网络服务器(NS)的通信CUPS 协议介绍

LoRa Basics™ Station 定期查询 CUPS 服务器以获取更新。该协议是 HTTP/REST,使用Credentials中描述的客户端/服务器身份验证方法。对于每个查询,工作站都会提供有关其当前状态的信息,并接收包含其 LNS 和 CUPS 凭证更新的二进制 blob,以及具有任意更新的通用数据段。 通…

网络安全的相关知识点

网络安全威胁类型&#xff1a; 1.窃听&#xff1a;广播式网络系统。 2.假冒 3.重放&#xff1a;重复一份报文或者报文的一部分&#xff0c;以便产生一个被授权的效果。 4.流量分析 5.数据完整性破坏 6.拒绝服务 7.资源的非授权使用 8.陷门和特洛伊木马&#xff1a;木马病毒有客…

Java课题笔记~ Spring 的事务管理

一、Spring 的事务管理 事务原本是数据库中的概念&#xff0c;在 Dao 层。但一般情况下&#xff0c;需要将事务提升到业务层&#xff0c;即 Service 层。这样做是为了能够使用事务的特性来管理具体的业务。 在 Spring 中通常可以通过以下两种方式来实现对事务的管理&#xff…

Vue3大屏幕动态滚动

Vue3 大屏数字滚动效果 随着大屏幕技术的发展&#xff0c;大屏数字滚动效果在各种应用场景中越来越常见&#xff0c;例如数字展示、统计数据展示等。Vue3 作为一种流行的前端开发框架&#xff0c;提供了强大的工具和便捷的开发方式&#xff0c;非常适合实现大屏数字滚动效果。…

花样滑冰选手骨骼点动作识别

2023 CCF BDCI 基于飞桨实现花样滑冰选手骨骼点动作识别 16名方案以及总结 比赛任务 花样滑冰与其他运动项目相比&#xff0c;其动作类型的区分难度更大&#xff0c;这对识别任务来说是极大的挑战。对于花样滑冰动作识别任务&#xff0c;主要难点如下&#xff1a; (1) 花样滑…

Python-OpenCV中的图像处理-图像梯度

Python-OpenCV中的图像处理-图像梯度 图像梯度Sobel 算子和 Scharr 算子Laplacian 算子 图像梯度 图像梯度&#xff0c;图像边界等使用到的函数有&#xff1a; cv2.Sobel()&#xff0c; cv2.Scharr()&#xff0c; cv2.Laplacian() 等原理&#xff1a;梯度简单来说就是求导。Op…

fastadmin、vue、react图标库适用于多种框架

在二开fastadmin中&#xff0c;在写vue以及react时&#xff0c;侧边导航栏以及按钮中常常需要很多图标&#xff0c;那么这些图标应该去哪里得到呢&#xff0c;在这里给大家一个链接&#xff0c;这里有丰富的图标库&#xff0c;可以找到自己想要的进行使用。 点击下方链接&…

gstreamer-pipeline用法汇总

生成mp4 生成2s包含video和audio的mp4 gst-launch-1.0 -e --gst-debug2 \ \ videotestsrc num-buffers60 ! video/x-raw,framerate30/1 ! \ openh264enc ! h264parse ! muxer.video_0 \ \ audiotestsrc num-buffers90 ! audio/x-raw,channels1 ! \ fdkaacenc ! aacparse ! mu…

github pages 用法详解 发布自己的网站

github pages 基础用法 URL 规则 假设你的 github 帐号为 mygithub&#xff0c;需要发布的仓库名为 myrepo&#xff0c;那么 pages 的 URL 为&#xff1a; https://mygithub.github.io/myrepo 添加内容 用任意编辑器写好&#xff08;或者生成&#xff09;标准的网页内容&a…