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 (
        
            {() => {
                return (
                    

                        
我是Mobx的应用
                        

                            
mobx组件
                            
使用mobx 的数据 msg === {store.msg}
                            
使用mobx 的数据 number === {store.number}
                            
使用mobx 的数据 str === {store.str}
                            
mobx的计算属性 1 ： {store.double}
                            
mobx的计算属性 2 ： {store.tatal}
                             { store.changeNum() }}>改变munber
                             {store.changeStr('柳林')}}>改变str
  
                        
                    
                )
            }}
        

    )
}
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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！