react中的mobx如何使用

这篇文章主要介绍“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如何使用的资料请关注九品源码其它相关文章！