React 全局状态管理 mobx+hooks+持久化 的使用

最新推荐文章于 2025-04-26 10:25:39 发布
最新推荐文章于 2025-04-26 10:25:39 发布
阅读量1.6k 收藏 25
点赞数 19
文章标签： react.js arcgis 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_56295520/article/details/135145303
版权
本文分析了mobx+hooks的优点，如学习成本低、响应式和高效渲染，同时也指出其自由度高可能导致代码风格不统一的缺点。介绍了安装、store封装、使用示例以及持久化特性，最后展示了登录前后store状态的变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一、mobx+hooks优缺点分析

优点：

  • 学习成本少，基础知识非常简单，跟 Vue 一样的核心原理，响应式编程。
  • 一个store即写state，也写action，这种方式便于理解
  • 组件会自动订阅store中具体的某个属性，只要当属性变化时，组件才会rerender，渲染效率较高
  • 不用对使用的store进行interface或type声明！
  • 内置异步action操作方式
  • 代码量真的很少，使用很简单有没有，强烈推荐！

缺点：

  • 过于自由：Mobx提供的约定及模版代码很少，这导致开发代码编写很自由，如果不做一些约定，比较容易导致团队代码风格不统一，团队建议启用严格模式！
  • 使用方式过于简单

如果想学习redux状态管理的，可查看文章：
Redux的使用 + 中间件处理异步action+ redux持久化

二、相关代码

1、安装

npm i mobx mobx-react mobx-persist-store -D

2、封装store

（1）新建文件【src/store/globalStore.ts】

在这里插入图片描述

（2）创建store并导出，新建文件【store/index.ts】

在这里插入图片描述

3、使用store

修改store的状态示例，例如，在登录页存储token和用户信息
在这里插入图片描述

获取store的状态示例，例如：在路由鉴权里，检查token
在这里插入图片描述

4、查看效果

由于store做了持久化，所以可通过浏览器的sessionStorage查看效果。

下图是登录前（即store的状态初始化结果）

在这里插入图片描述

下图是登录后，store的状态发生改变

在这里插入图片描述

FuyuMiracle
关注
mobx在react hooks中的应用
Ctrl30
03-24 4178
hooks 实现inject功能 // utils/useStores.js import React from 'react' import { MobXProviderContext} from 'mobx-react'; import RootStore from '~/stores/index' const useStores = (name) => React.useContext...
React 状态管理器，我是这样选的
老司机的后备箱
10-25 2373
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
在react hooks中使用mobx
zhangqling的博客
04-23 2553
一、 定义store 创建文件名为mobxStore的js文件 import { observable, action, computed, decorate } from 'mobx'; class MyStore { queryLoading = false; releaseLoading = false; tableList = []; setQeuryLoading(status) { this.queryLoading = status; } setRel
MobX 在 React 中的使用：状态管理的新选择
最新发布
你若盛开，清风自来
04-26 1081
🤍 前端开发工程师、技术日更博主、已过CET6🍨、23年度博客之星前端领域TOP1🕠高级专题作者、打造专栏🍚签约作者、上架课程。
在react hook里使用mobx(配置mobx依赖)
Dust的博客
08-06 858
在powershell里安装依赖 (直接npm i mobx或者npm i mobx-react是会报错的) npm i mobx mobx-react --save save是下载到"dependencies"里 npm i mobx-react-lite lite是配合hook使用的 添加store.ts文件(在此附上全部文件列表) store.ts import { makeAutoObservable } from 'mobx' class Store { // 颜色.
react-hooks-mobx:React Hooks + MobX指南
05-14
React Hooks + Mobx指南 链接到示例： : 链接到详细指南： : 建立统计 File sizes after gzip: 54.13 KB build\static\js\2.f209cf74.chunk.js 1.46 KB build\static\js\main.2336ad02.chunk.js 779 B build\static\js\runtime-main.bae833a8.js 656 B build\static\css\main.1b00465a.chunk.css 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视
react在hook中使用mobx
qq_40816649的博客
01-14 4615
和class组件的写法不同，hook使用mobx需要在组件的最外层包裹一层mobx-react提供的observer，在没有包裹observer的情况下可以拿到mobx的数据也可以改变mobx的数据，但是改变之后不会触发视图的更新。 import React from 'react'; import { withRouter } from 'react-router-dom' import s...
Zustand-persist：React状态管理与持久化方案
在解释标题之前，首先要明确“zustand-persist”是一个与React框架紧密相关的状态管理库的扩展，它允许状态的持久化存储。而标题中的“持久和补水状态”是一个比喻，暗示状态管理的两个重要方面： 1. **持久化...
Next.js全局状态管理：zustand。以及cookie和seesion的实用剖析。
qq_64510339的博客
08-13 2354
但是当我想从cookie转回来时它变成了”%7B%22userId%22%3A%229%22%2C%22username%22%3A%2218285873023%22%2C%22password%22%3A%22123456%22%2C%22phone%22%3A%2218285873023%22%7D“这样的ASCII 字符，JSON.parse处理后是null。废话多了点，但也算是我的经验了吧，我的目的是记录一边后以后就不会再焦头烂额了。我比较喜欢边写代码，便给出注释，所以不懂的看注释，我就不再复述。
AllDemo:2020全栈学习Demo大合集 包含最新 hooks TS 等 还有umi+dva,数据可视化等实战项目 (持续更新中)
04-28
react-router,node 基础,node 网络编程,node 持久化 mysql,node 持久化 mongodb,node 部署,pm2,koa 实战,微信小程序,网络安全,RN,Flutter,webpack,微信公众号,自动化测试,前端性能优化,数据结构算法),包含小的 html,...
深入探究MobX-State-Tree：React状态管理新选择
根据给定文件的信息，我们将深入探讨MobX状态树（简称MST）以及它在React状态管理中的作用和特点。在详细解释之前，需要明确的是，MobX状态树是一套构建在MobX之上的状态管理解决方案，旨在为开发者提供一种更为直观...
mobx-react-lite：基于React 16.8和Hooks的MobX轻量级React绑定
02-05
MobxReact轻 :police_car_light: :police_car_light: :police_car_light: 此已移至 这是的较轻版本，支持React功能组件，因此使该库略快且更小（仅压缩了1.5kB ）。 但是请注意，可以在类组件的渲染内部使用<Observer> 。 与mobx-react不同，它不是Provider / inject ，因为可以使用useContext 。 兼容性表（主要版本） 暴民 MobxReact轻 浏览器 6 3 现代浏览器（兼容模式下的IE 11+） 5 2 现代浏览器 4 2 IE 11+，无代理的RN支持 mobx-react-lite需要React 16.8或更高版本。 用户指南 :backhand_index_pointing_right: API参考 :hammer_and_pick: ob
mobx-persist：坚持mobx存储
02-05
Mobx坚持 $ npm install mobx-persist --save 用法 import { observable } from 'mobx' import { create , persist } from 'mobx-persist' class SomeItem { @ persist @ observable name = 'some' @ persist @ observable count = 0 } class SomeStore { @ persist ( 'object' ) @ observable obj = { a
use-state-persist:简单的React Hook可以在本地持久缓存useState。 轻松加载陈旧状态以获得更好的用户体验
05-02
使用状态坚持 一个简单的React Hook可以将useState持久存储在本地存储中。 可在Web和React Native 。 轻松实施 离线状态 重新验证流程时过时 全球状态 npm install use-state-persist # or yarn add use-state-persist 如何持久化useState 行为和API与useState相同，因此您可以通过轻松替换要保留为脱机的调用的useState挂钩来使用它。 import { useStatePersist as useState } from 'use-state-persist' ; const Component = ( ) => { // Before //const [counter, setCounter] = useState(0); const [ counter , s
mobx如何与react hooks配合使用
weixin_50236973的博客
03-02 1196
import React from 'react'; import {useObserver, Observer} from 'mobx-react'; import {appStore} from './appStore'; // 方法1： function Methods1() { return useObserver(() => ( <div onClick={() => appStore.count = 1}>{ap...
react全局状态管理_使用 Mobx + Hooks 管理 React 应用状态
weixin_39630140的博客
12-19 1072
时长：预计 15 min面向：用烦了 Redux 的开发者代码：获得更好阅读体验版本：React 16.13 + TypeScript 3.7 + Mobx 5.15 + Mobx-React 6.1目标：实现一个 Todo List 应用如下Step 1：创建一个 Store Model// ./src/stores/todo.ts import { action, observable, c...
React使用MobX作为全局状态管理
小火车况且况且况且的博客
07-19 1145
`React`使用`MobX`作为全局状态管理
react用mobx进行全局状态管理
weixin_41333696的博客
09-04 182
my-react-app
react通过mobx实现全局状态管理
懒洋洋
03-31 1670
vue 里通过 vuex实现全局状态管理，在react里可以通过redux或者mobx也可以实现全局状态管理；但是通过查看文档，发现redux调用过程有些繁琐，对于一些小白来讲，使用起来有些吃力今天通过简单的demo来介绍使用mobx； 首先安装依赖 yarn add mobx mobx-react 此demo主要用到的东西 observer observable action 目录结构如图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值