这篇文章主要介绍“react中的mobx如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react中的mobx如何使用”文章能帮助大家解决问题。
新建一个mobx.jsx文件
import { useContext } from "react"import MyContext from '../../utils/Context'//引入Observer监听组件 实现数据和视图层的双向改变import { Observer } from 'mobx-react'const Mobx = () => { //hook有规则 useContext只能在组件里面用 const store = useContext(MyContext); return ( <Observer> {() => { return ( <div> <p>我是Mobx的应用</p> <ul> <li>mobx组件</li> <li>使用mobx 的数据 msg === {store.msg}</li> <li>使用mobx 的数据 number === {store.number}</li> <li>使用mobx 的数据 str === {store.str}</li> <li>mobx的计算属性 1 ： {store.double}</li> <li>mobx的计算属性 2 ： {store.tatal}</li> <button onClick={() => { store.changeNum() }}>改变munber</button> <button onClick={()=> {store.changeStr('柳林')}}>改变str</button> </ul> </div> ) }} </Observer> )}export default Mobx新建一个store文件夹 ---- 下面一个index.js文件
//仓库文件 放所有的状态. 数据 import { makeAutoObservable, runInAction, autorun, reaction } from "mobx"function createDoubler(value) { return makeAutoObservable({ //这是放状态的 msg: '我是公共数据', number: 20, str: '程小小', value, //关键字 get 就代表这是一个计算属性 函数内部必须要返回一个值 get double() { return this.number * 2 }, //get 计算属性可以有多个 get tatal() { return this.str + this.number }, //actions 所有的方法 方法内部 内部可以放异步操作 changeNum() { console.log('changeNum 函数执行了'); //异步操作会报警号 ，但是不会报错 解决方法：用runInaction包起来 setTimeout(() => { //如果action里面用了异步 ，最好将你异步里面改变state的那步操作 用runInaction包起来 ，可以优化一下 runInAction(() => { this.number++ }) }, 2000) }, changeStr(v) { this.str = v; } })}let store = createDoubler()//autorun 类似于监听 和可以写在组件里面autorun(() => { let a = store.number; console.log('autorun 执行了');})//Reaction 指定你要监听的东西 和监听的作用一样reaction(() => store.number, () => { console.log('reaction 函数执行了');})//导出一个对象export default store新建一个context.jsx文件
//把 创建context提出去import { createContext } from 'react'const MyContext = createContext()export default MyContext关于“react中的mobx如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
