react中的mobx如何使用

這篇文章主要介紹“react中的mobx如何使用”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“react中的mobx如何使用”文章能幫助大家解決問(wèn)題。

1.新建一個(gè)mobx.jsx文件

import { useContext } from "react"
import MyContext from '../../utils/Context'
//引入Observer監(jiān)聽(tīng)組件  實(shí)現(xiàn)數(shù)據(jù)和視圖層的雙向改變
import { Observer } from 'mobx-react'

const Mobx = () => {
    //hook有規(guī)則  useContext只能在組件里面用
    const store = useContext(MyContext);

    return (
        <Observer>
            {() => {
                return (
                    <div>
                        <p>我是Mobx的應(yīng)用</p>
                        <ul>
                            <li>mobx組件</li>
                            <li>使用mobx 的數(shù)據(jù) msg === {store.msg}</li>
                            <li>使用mobx 的數(shù)據(jù) number === {store.number}</li>
                            <li>使用mobx 的數(shù)據(jù) str === {store.str}</li>
                            <li>mobx的計(jì)算屬性 1 ： {store.double}</li>
                            <li>mobx的計(jì)算屬性 2 ： {store.tatal}</li>
                            <button onClick={() => { store.changeNum() }}>改變munber</button>
                            <button onClick={()=> {store.changeStr('柳林')}}>改變str</button>
  
                        </ul>
                    </div>
                )
            }}
        </Observer>

    )
}
export default Mobx

2.新建一個(gè)store文件夾 ---- 下面一個(gè)index.js文件

//倉(cāng)庫(kù)文件  放所有的狀態(tài). 數(shù)據(jù) 
import { makeAutoObservable, runInAction, autorun, reaction } from "mobx"

function createDoubler(value) {

    return makeAutoObservable({

        //這是放狀態(tài)的
        msg: '我是公共數(shù)據(jù)',
        number: 20,
        str: '程小小',
        value,

        //關(guān)鍵字 get 就代表這是一個(gè)計(jì)算屬性 函數(shù)內(nèi)部必須要返回一個(gè)值
        get double() {
            return this.number * 2
        },

        //get 計(jì)算屬性可以有多個(gè)
        get tatal() {
            return this.str + this.number
        },

        //actions  所有的方法 方法內(nèi)部   內(nèi)部可以放異步操作
        changeNum() {
            console.log('changeNum 函數(shù)執(zhí)行了');

            //異步操作會(huì)報(bào)警號(hào) ，但是不會(huì)報(bào)錯(cuò)  解決方法：用runInaction包起來(lái)

            setTimeout(() => {
                //如果action里面用了異步 ，最好將你異步里面改變state的那步操作 用runInaction包起來(lái) ，可以?xún)?yōu)化一下
                runInAction(() => {
                    this.number++
                })

            }, 2000)
        },

        changeStr(v) {
            this.str = v;

        }

    })
}

let store = createDoubler()

//autorun 類(lèi)似于監(jiān)聽(tīng)  和可以寫(xiě)在組件里面
autorun(() => {
    let a = store.number;
    console.log('autorun 執(zhí)行了');
})

//Reaction 指定你要監(jiān)聽(tīng)的東西  和監(jiān)聽(tīng)的作用一樣
reaction(() => store.number, () => {
    console.log('reaction 函數(shù)執(zhí)行了');
})


//導(dǎo)出一個(gè)對(duì)象
export default store

3.新建一個(gè)context.jsx文件

//把 創(chuàng)建context提出去
import { createContext } from 'react'

const MyContext = createContext()

export default MyContext

關(guān)于“react中的mobx如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。