react 中 mobx的使用案例详解
作者:顾洛笙
这篇文章主要介绍了react 中 mobx的使用案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
1.新建一个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
2.新建一个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
3.新建一个context.jsx文件
//把 创建context提出去 import { createContext } from 'react' const MyContext = createContext() export default MyContext
到此这篇关于react 中 mobx的使用案例详解的文章就介绍到这了,更多相关react mobx使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!