react 中 mobx的使用案例详解

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

//仓库文件  放所有的状态. 数据 
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提出去
import { createContext } from 'react'

const MyContext = createContext()

export default MyContext