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

这篇具有很好参考价值的文章主要介绍了React中使用mobx管理状态数据使用样例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

安装依赖

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 = 0
  constructor() {
    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中使用mobx管理状态数据使用样例,HTML前端,react.js,前端,前端框架

使用效果

React中使用mobx管理状态数据使用样例,HTML前端,react.js,前端,前端框架

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

React中使用mobx管理状态数据使用样例,HTML前端,react.js,前端,前端框架 

 文章来源地址https://www.toymoban.com/news/detail-637957.html

到了这里,关于React中使用mobx管理状态数据使用样例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序:全局状态管理mobx-miniprogram(类似store)

            需求是,每个播放视频的地方都有控制是否静音的按钮,点某一个静音则全局静音。         问题 :由于我的每个小卡片都是一个组件,本质是每个页面引几次同一个组件,刚开始用的setData,但是这样每个卡片中的数据都是经过深拷贝而独立的,所以点击某个按钮

    2024年02月11日
    浏览(53)
  • React+Mobx|基本使用、模块化

    欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了 【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t 框架 React框架 R e a

    2023年04月27日
    浏览(30)
  • react 09之状态管理工具1 redux+ react-thunk的使用实现跨组件状态管理与异步操作

    npm install redux react-redux npm i redux-thunk redux-thunk redux-thunk是一个Redux的中间件,它允许你在Redux中编写异步的action creators。

    2024年02月13日
    浏览(49)
  • Mobx在非react组件中修改数据,在ts/js中修改数据实现响应式更新

    我们都之前在封装mobx作为数据存储的时候,使用到了useContext作为包裹,将store变成了一个hooks使用,封装代码: 但是我们都知道hooks只能在函数组件中或者hooks中使用,不能在ts/js代码中使用,但是我这里有一个需求,想每次发送接口请求的时候,做一个后置处理器,用于获取

    2024年02月11日
    浏览(48)
  • React 状态管理:高效处理数组数据的5种方法

    为什么在 React 中,状态(state)如果是数组类型,需要单独处理?主要有以下几个原因: 不可变性(Immutability) : React 中的状态是不可变的,意味着我们不能直接修改状态,而是要创建一个新的状态对象。对于数组来说,直接修改数组元素是不符合 React 的设计原则的。 性能优化 : React 使用

    2024年04月10日
    浏览(40)
  • React使用Valtio的hook实现响应式状态管理

    Valtio 是一个轻量级的库,可以在前端应用程序中管理状态。它的使用方式非常简单直观,让我们能够轻松跟踪和更新应用程序的状态,并且无需手动处理组件重新渲染的逻辑。假设我们正在构建一个社交媒体应用,我们想要追踪用户的信息、主题设置以及未读通知的数量。

    2024年01月22日
    浏览(35)
  • 小程序全局变量管理-mobx引入与使用

    背景: 对于全局变量操作,如果不规范使用很容易产生意想不到的问题,使用mobx对全局变量进行管理,能够规范代码操作,使程序变得简单高效。 代码使用: 1)定义全局变量 2)页面1中引用 该变量 page1.ts page1.wxml 3)页面2中更改该变量。 4)测试。页面1跳转至页面2,页面

    2024年02月19日
    浏览(39)
  • React-Mobx(入门)

    目录 1. Mobx介绍 优势  社区评价 ​编辑  2.配置开发环境 3.基础使用 1)初始化mobx 2)React使用store  4.计算属性(衍生状态)  5.异步数据处理 6. 模块化 1)定义task模块   2)定义counterStore 3)组合模块导出统一方法 4)组件使用模块中的数据 7. 多组件共享数据 文章推荐 一个

    2024年02月02日
    浏览(34)
  • React全局状态管理

              redux是一个状态管理框架,它可以帮助我们清晰定义state和处理函数,提高可读性,并且redux中的状态是全局共享,规避组件间通过props传递状态等操作。           在React应用的根节点,需要借助React的Context机制存放整个store信息。需要进行以下配置。 index.js  

    2024年02月02日
    浏览(46)
  • React中的状态管理

    目录 前言 1. React中的状态管理 1.1 本地状态管理 1.2 全局状态管理 Redux React Context 2. React状态管理的优势 总结 前言 当谈到前端开发中的状态管理时,React是一个备受推崇的选择。React的状态管理机制被广泛应用于构建大型、复杂的应用程序,它提供了一种优雅且高效的方式来

    2024年02月05日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包