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 = 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组建中调试查看数据,找到对应的组件,然后查看Hooks下Context属性,找到里面有store的那个,然后打开,即可查看里面存储的数据

相关推荐
科技探秘人11 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人12 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR17 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香19 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969322 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai27 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91536 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull3 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#