React使用Mobx6.x共享狀態(tài)問題

更新時間：2023年10月13日 09:11:50 作者：明知山_

這篇文章主要介紹了React使用Mobx6.x共享狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

React使用Mobx6.x共享狀態(tài)

文檔地址

安裝mobx、mobx-react-lite

mobx-react-lite是mobx-react的輕量級版本

yarn add mobx mobx-react-lite

在src目錄下新建store文件夾，新增count.js文件

count為共享的數(shù)據(jù)
addCount為共享的方法

import { makeAutoObservable } from "mobx"
export default makeAutoObservable({
    count: 0,
    addCount() {
        this.count++
    }
})

jsx文件引入

被observer 包裹的組件可以監(jiān)聽store的值并改變

import { useEffect } from 'react'
import countStore from '@/store/count'
import { observer } from "mobx-react-lite"
export default observer(() => {
    //監(jiān)聽mobx觸發(fā)事件
    useEffect(() => {
        console.log(countStore.count)
    }, [countStore.count])
    return (
        <div>
            <div>count為：{countStore.count}</div>
            <button onClick={() => countStore.addCount()}>+1</button>
        </div>
    )
})

react-Mobx基本使用

十分鐘交互式的 MobX + React 教程

mobx 的核心理念是簡單、可擴展的狀態(tài)管理庫。比redux和react-redux方便許多

先create-react-app 構(gòu)建一個項目

1.裝包

1.1安裝mobx mobx-react

npm install  mobx mobx-react -S

1.2安裝裝飾器裝包搭配依賴去解析(可選),裝飾器作用>代碼更簡潔

  npm i --save-dev babel-plugin-transform-decorators-legacy

1.3裝完依賴,然后json 文件中配置啟用,現(xiàn)在采用的是babel7所以要這樣配置,也可以單獨在.babelrc文件中配置。

2者不能沖突，選其一

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

2.項目應(yīng)用

2.1一般先在src創(chuàng)建個store文件夾(定義狀態(tài)和創(chuàng)建實例)

2.2定義狀態(tài)并使其可觀察(狀態(tài)可以自定義創(chuàng)建)

import { observable, computed, action } from "mobx";
class OrderLine {
	// 被觀察者屬性
    @observable price = 0;
    @observable amount = 1;
    // 計算屬性  
    @computed
    get total() {
        return this.price * this.amount;
    }
    @observable length = 2;
    @computed
    get squared() {
        return this.length * this.length;
    }
    set squared(value) {
        // 這是一個自己的動作，不需要注解
        this.length = Math.pow(2, value);
    }
    //觸發(fā)的動作
    @action.bound
    resize() {
        this.price++;
    }
}
export default OrderLine;

2.3 在store目錄創(chuàng)建index.js (創(chuàng)建倉庫實例)

import OrderLine from "./OrderLine";
class Stores {
    constructor() {
        this.orderLine = new OrderLine();  //每次創(chuàng)建的狀態(tài)在這里注入
    }
}
export default new Stores();

2.4 類似react-redux一樣,MOBX也有mobx-react實現(xiàn)mobx與react的鏈接,所以在根組件中使用注入這個倉庫。

import React, { Component } from "react";
import MobxTest from "./Components/Mobox/MobxTset01";
import stores from "./Components/Mobox/store";
import { Provider } from "mobx-react";
class App extends Component {
    render() {
        return (
            <Provider {...stores}>
                <MobxTest />
            </Provider>
        );
    }
}
export default App;

2.5 創(chuàng)建視圖以響應(yīng)狀態(tài)的變化，在別的組件中使用注解的方式使用

import React, { Component } from "react";
import { observer, inject } from "mobx-react";
import { observable } from "mobx";
//@inject() 將組件鏈接到 stores,以props的形式傳遞給目標組件
@inject("orderLine")
@observer  //觀察者
class MobxTest extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentWillMount() {
    console.log("componentWillMount方法");
  }
  onReset() {
    this.props.orderLine.resize(); //狀態(tài)中定義的方法從而改變倉庫中的值
  }
  render() {
    //通過發(fā)現(xiàn)倉庫中定義的值,和方法都可以通過props屬性拿到注入orderLine所有屬性和方法
    console.log(this.props,'this.props');
    console.log(this.props.orderLine.amount);
    return (
      <div>
        <p>{this.props.orderLine.total}</p>
        {/* <p>{this.secondsPassed}</p> */}
        <p>{this.props.orderLine.total}</p>
        <button onClick={this.onReset.bind(this)}>按鈕</button>
      </div>
    );
  }
}
export default MobxTest;

效果圖 :