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

最新推荐文章于 2024-04-29 21:09:02 发布
最新推荐文章于 2024-04-29 21:09:02 发布
阅读量1.3k 收藏 25
点赞数 19
文章标签： react.js arcgis 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56295520/article/details/135145303
版权

文章目录

一、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
关注
  • 19
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react全局状态管理_使用 Mobx + Hooks 管理 React 应用状态
weixin_39630140的博客
12-19 984
时长：预计 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...
mobx如何与react hooks配合使用
weixin_50236973的博客
03-02 1082
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...
使用 MobX 实现数据持久化：最佳实践与技巧！
最新发布
笔记、经验、日常分享
04-29 567
MobX 本身不提供数据持久化功能，但是可以结合其他库或技术来实现数据持久化。可以使用localStorage 或 sessionStorage、IndexedDB、mobx-persist-store 库实现。
hooks+mobx实现状态管理及数据共享
a522589109的博客
11-07 136
定义一个createStore的hooks。（引用方式看项目风格而已，是统一的store目录下做模块化状态管理，还是在每一个页面下创建store，自行选择。在组件中引入store的方式也比较简单，通过teststore.ts文件中export出来的useStore方法，便可获取到该状态管理仓库（模块）的数据。定义一个测试类+mobx的makeAutoObservable/makeObservable方法，使得这个类中的属性具有响应式。对开发过程做一个小小记录。
Hook and Mobx demo
weixin_46030044的博客
08-06 268
一、 import React, {useState, useEffect, useCallback} from 'react' // import { CloseOutlined } from '@ant-design/icons'; export default function HookFour() { const [list, setlist] = useState(['a', 'ab', 'abc', 'b', 'cn']) const [oldlist] = useState(['a', '
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/reacthook中使用mobx进行数据状态管理
搬砖小鱼，请多指教呦
11-09 664
这样就可以使用mobx进行数据的管理和存储了，fighting各位。
AllDemo:2020全栈学习Demo大合集 包含最新 hooks TS 等 还有umi+dva,数据可视化等实战项目 (持续更新中)
04-28
react-router,node 基础,node 网络编程,node 持久化 mysql,node 持久化 mongodb,node 部署,pm2,koa 实战,微信小程序,网络安全,RN,Flutter,webpack,微信公众号,自动化测试,前端性能优化,数据结构算法),包含小的 html,...
react-ReactManga使用React实现的WebApp版开源漫画阅读器
08-15
4. **状态管理**：在大型应用中，全局状态管理是一个关键问题。"ReactManga"可能使用了Redux或MobX等状态管理库，来集中管理应用的共享状态，如用户登录状态、收藏的漫画列表等。 5. **用户认证与授权**：用户登录...
react：building用于构建React应用程序的软件包集合
02-20
在实际开发中，根据项目需求，开发者还会选择其他的库和工具，如表单处理库Formik、状态持久化库redux-persist、性能优化工具React.memo等。理解并熟练运用这些工具和库，是构建高效React应用的关键。
react-todo:使用 react 构建的 TODO 应用程序:spiral_notepad:
05-31
为了保持用户关闭或刷新页面后待办事项仍然存在，可以考虑使用浏览器的`localStorage`或者引入像Redux或MobX这样的状态管理库进行数据持久化。 ### 9. 样式处理 React应用中的样式可以使用内联样式、CSS Modules，...
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
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
ToDo-app:一个使用React Native的简单的待办事项列表应用程序
05-16
1. 数据管理：通常使用状态管理库，如Redux或MobX，来存储和管理待办事项的状态。状态包括事项的添加、删除、完成状态等。 2. UI组件：React Native提供了一系列原生UI组件，如Text、View、 TextInput、...
react中使用mobx6以及持久化存储mobx-persist-store
joeky520的博客
01-24 3875
react中使用mobx6以及持久化存储mobx-persist-store mobx6官方文档 mobx-persist-store文档 安装mobx及mobx-persist-store yarn add mobx mobx-react mobx-persist-store --save 在项目中使用mobx 在src目录下新建store文件夹，新建index.js文件 模块化开发，统一的数据仓库有利于数据管理与分发，也可以向mobx5一样在不同的模块下建state 定义类，一般以模块划分，
MobX 在 hook 中的使用
weixin_33794626的博客
02-01 523
关于 mobX 在 react 16.8.0 以上的用法以下例子均取自官网文档 一般用法: import { observer, useLocalStore } from 'mobx-react'; const Hooks = observer(() => { const todo = useLocalStore(() => ({ title: 'C...
react在hook中使用mobx
qq_40816649的博客
01-14 4527
和class组件的写法不同，hook使用mobx需要在组件的最外层包裹一层mobx-react提供的observer，在没有包裹observer的情况下可以拿到mobx的数据也可以改变mobx的数据，但是改变之后不会触发视图的更新。 import React from 'react'; import { withRouter } from 'react-router-dom' import s...
在react hooks中使用mobx
zhangqling的博客
04-23 2432
一、 定义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 hooks中的应用
Ctrl30
03-24 4084
hooks 实现inject功能 // utils/useStores.js import React from 'react' import { MobXProviderContext} from 'mobx-react'; import RootStore from '~/stores/index' const useStores = (name) => React.useContext...
react18全家桶+hooks+项目实战 网盘
09-17
React 18全家桶是React.js的最新版本，它引入了很多新特性和改进，使得开发更加方便和高效。其中，Hooks是React 16.8版本引入的一项重要特性，它允许我们在无需编写类组件的情况下，在函数式组件中使用状态和其他React功能。 React 18全家桶Hooks项目实战网盘是一个基于React 18全家桶的实际开发项目，旨在通过实际开发来学习和掌握React 18全家桶及Hooks的使用。 在这个项目中，我们可以通过网盘将文件上传、下载和分享给其他用户。首先，我们可以使用React 18全家桶的新特性来创建一个界面，例如使用React函数组件和Hooks来管理界面的状态、处理用户输入以及渲染文件列表等。我们可以使用React Router来管理不同页面之间的导航，并使用React Context来共享全局的状态和数据。 对于文件的上传和下载功能，我们可以利用React 18全家桶提供的新API，例如使用React Concurrent Mode来提高文件上传和下载的性能。同时，我们可以使用React Query来管理文件的后台数据请求和状态更新，以及使用React Hook Form来处理表单的数据验证和提交。 在项目中，我们可以使用React 18全家桶的新特性来实现一些高级的功能，例如使用React Server Components来实现服务器端渲染和实时数据更新，或使用React Fast Refresh来提高开发和调试的效率。 通过参与React 18全家桶Hooks项目实战网盘，我们可以深入了解并熟练掌握React 18全家桶及Hooks的使用。这将有助于我们在实际的React项目开发中提高开发效率和代码质量。同时，我们也可以通过参与项目来拓展我们的React技术栈，并与其他开发者共同学习和交流。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值