快捷導(dǎo)航

React Mobx狀態(tài)管理工具的使用

更新時間：2023年02月06日 09:57:25 作者：碰磕

這篇文章主要介紹了React Mobx狀態(tài)管理工具的使用，MobX是一個狀態(tài)管理庫，它會自動收集并追蹤依賴，開發(fā)人員不需要手動訂閱狀態(tài)，當(dāng)狀態(tài)變化之后MobX能夠精準(zhǔn)更新受影響的內(nèi)容，另外它不要求state是可JSON序列化的，也不要求state是immutable

Mobx與redux的區(qū)別

mobx寫法偏向與oop
對一份數(shù)據(jù)可以直接進行修改操作,不需要始終返回一個新的數(shù)據(jù)
并非單一store，可以多個
redux默認使用js原生對象存儲數(shù)據(jù)，而mobx使用可觀察對象

使用

安裝

npm i mobx@5

使用嚴格模式

configure({
    enforceActions:'always'
})

observable&&autorun

autorun用于監(jiān)聽值的改變
observable用于定義

import React,{Component} from 'react';
import {observable,autorun} from 'mobx';
/**
 * 基本類型
 */
//對于普通類型數(shù)據(jù)的監(jiān)聽
let observableNumber=observable.box(66)
let observableDesc=observable.box("學(xué)無止境...")
//第一次執(zhí)行一次,之后被改變與它相關(guān)的會再次執(zhí)行
autorun(()=>{
  console.log(observableNumber.get())
})
setTimeout(() => {
  observableNumber.set(11)
  observableDesc.set("愛學(xué).")
}, 2000);
/**
 * 對象使用map
 */
let myobj=observable.map({
  name:"碰磕",
  age:9999
})
autorun(()=>{
  console.log("對象name屬性改變了"+myobj.get("name"))
})
class Zhuye extends Component{
  render() {
    return (  
      <div>
        Mobx
      </div>
    );
  };
};
export default Zhuye;

action

專門修改可觀察的value

import {observable,autorun,action} from 'mobx'
const store=observable({
    isTabbarShow:true,
    list:[],
    cityName:"北京",
    changeShow(){
        this.isTabbarShow=true
    },
    changeHide(){
        this.isTabbarShow=false
    }
},{
    changeHide:action,
    changeShow:action//標(biāo)記兩個方法是action,專門修改可觀察的value
})
export default store

然后在需要改變isTabbarShow的地方調(diào)用方法即可…

使用裝飾器寫法

import {observable,autorun,action} from 'mobx'
class Store{
    @observable isTabbarShow=true
    @observable list=[]
    @action changeShow(){
        this.isTabbarShow=true
    }
    @action changeHide(){
        this.isTabbarShow=false
    }
}
const store=new Store()
export default store

由于不支持裝飾器寫法，需要讓它支持

1.安裝依賴:

npm i @babel/core @babel/plugin-proposal-decorators @babel/preset-env

2.創(chuàng)建.babelrc{

"presets": [
"@babel/preset-env"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}

3.創(chuàng)建config-overrides.js

const path = require('path')
const { override, addDecoratorsLegacy } = require('customize-cra')
function resolve(dir) {
    return path.join(__dirname, dir)
}
const customize = () => (config, env) => {
    config.resolve.alias['@'] = resolve('src')
    if (env === 'production') {
        config.externals = {
            'react': 'React',
            'react-dom': 'ReactDOM'
        }
    }
    return config
};
module.exports = override(addDecoratorsLegacy(), customize())

4.安裝依賴

npm i customize-cra react-app-rewired

5.修改package.json

----...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test":  "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
----....

vscode需要配置

文件—首選項----設(shè)置-----搜索experimentalDecorators----勾上該設(shè)置

最后重新運行即可…

runInAction(異步)

異步請求時需要，在嚴格模式下

import axios from 'axios'
import {observable,autorun,action,runInAction, configure} from 'mobx'
configure({
    enforceActions:'always'
})
class Store{
    @observable isTabbarShow=true
    @observable list=[]
    @action changeShow(){
        this.isTabbarShow=true
    }
    @action changeHide(){
        this.isTabbarShow=false
    }
    @action getList(){
        axios({
            method:'GET',
            url:"https://m.maizuo.com/gateway?cityId=440300&ticketFlag=1&k=2005318",
            headers:{
                "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.0","e":"1654433035923688551579649"}',
                "X-Host": "mall.film-ticket.cinema.list"
            }    
        }).then(res=>{
            runInAction(()=>{
                this.list=res.data.data.cinemas
            })
        })
    }
}
const store=new Store()
export default store

這樣就可以修改this.list的了

Mobx的基本使用就大功告成了

到此這篇關(guān)于JavaScript Mobx狀態(tài)管理工具的使用的文章就介紹到這了,更多相關(guān)JS Mobx內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: