首页 > 网络编程 > JavaScript > javascript类库 > React > React使用Mobx6.x共享状态

React使用Mobx6.x共享状态问题

2023-10-13 09:11:50 作者：明知山_

这篇文章主要介绍了React使用Mobx6.x共享状态问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

React使用Mobx6.x共享状态

安装mobx、mobx-react-lite

mobx-react-lite是mobx-react的轻量级版本

yarn add mobx mobx-react-lite

在src目录下新建store文件夹，新增count.js文件

count为共享的数据
addCount为共享的方法

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

jsx文件引入

被observer 包裹的组件可以监听store的值并改变

import { useEffect } from 'react'
import countStore from '@/store/count'
import { observer } from "mobx-react-lite"
export default observer(() => {
    //监听mobx触发事件
    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 的核心理念是简单、可扩展的状态管理库。比redux和react-redux方便许多

先create-react-app 构建一个项目

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 文件中配置启用,现在采用的是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.项目应用

2.1一般先在src创建个store文件夹(定义状态和创建实例)

2.2定义状态并使其可观察(状态可以自定义创建)

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);
    }
    //触发的动作
    @action.bound
    resize() {
        this.price++;
    }
}
export default OrderLine;

2.3 在store目录创建index.js (创建仓库实例)

import OrderLine from "./OrderLine";
class Stores {
    constructor() {
        this.orderLine = new OrderLine();  //每次创建的状态在这里注入
    }
}
export default new Stores();

2.4 类似react-redux一样,MOBX也有mobx-react实现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 创建视图以响应状态的变化，在别的组件中使用注解的方式使用

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(); //状态中定义的方法从而改变仓库中的值
  }
  render() {
    //通过发现仓库中定义的值,和方法都可以通过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;

效果图 :

Mobx官网传送门：https://cn.mobx.js.org/

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

React使用Mobx6.x共享状态问题