锐客网

  1. 首页 > it技术 > >

React mobx 基础使用

组件通信

  1. props
  2. context
  3. redux mobox
    任意组件间的数据通信
### mobx
会有一个单独的js文件进行管理
父组件 数据注入 Provider
子组件 （任意组件）
  1. 安装
    yarn add mobx
    npm install mobx --save
    1. 有一个包
父级的入口管理
  1. 引入 mobx-react 使用Provider
  2. 引入store.js 中的文件 （可能是多个）
    new Store()
    添加 - 引入一个新的store
    • stores={
    【React mobx 基础使用】newStore:new NewStore()，
    }
  3. 使用Provider 注入 { ...stores }
### 报错
由于mobx 不支持@语法所以会报错
// import {observable, computed, action} from 'mobx'; 3 | class Store { > 4 |@observable tradeCfg = { |^ 5 |'sadf': 'sadf' 6 |}; 7 |@observable baseInfo = {};

  1. 解决方法
    -1：

    yarn add @babel/plugin-proposal-decorators
    yarn add @babel/plugin-proposal-class-properties
    -2：在package.json中 找到 babel下的presets 替换代码

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

如何在页面中读取 mobx 数据
  1. 类组件
    需要的子页面使用
    1. import { withRouter } from 'react-router-dom'; //1. 引入
    2. import { observer,inject } from 'mobx-react';
    在类组件的上面
    // 1.引入需要的模块 import { withRouter } from 'react-router-dom'; //1. 引入 import { observer, inject } from 'mobx-react'; //2.使用引入的模块 @withRouter @inject('FirstStore',)//多个之前需要，号隔开 @observer

    1. 从this.props上解构使用
  2. 函数组件
    使用时父级的入口管理不变；
子组件使用 读取值;
  1. import { withRouter } from 'react-router-dom'; //用来连接router更新数据的
  2. import { observer, MobXProviderContext } from 'mobx-react'; // 用来
  3. function useStores(name) {
    return React.useContext(MobXProviderContext)[name] } ===上面方法等价于下面的这个 react.useContext(MobXProviderContext).FirstStore;

  1. 导出时先试用 observable()包裹组件，然后再用WithRouter在包裹
    export default withRouter(observable( View ))

mobx 文档解构
mobx 步骤

// mobx 文件解构 import { observable, computed, action, autorun, runInAction, makeObservable } from 'mobx'// 有一个类 class Store{ @obserbablename='小张'; //用 @obserbable 来定义数据【基本数据类型，复合数据类型】 @action//使用 @action 来定义方法 fn=(text)=>{ this.name=text } }export default Store;

在页面上修改mobx 的数据
类组件 修改mobx
import { observer,inject } from 'mobx-react'; @withRouter @inject('FirstStore','SecondStore')//多个之前需要，号隔开 @observer class View extends Component {static contextType = DataContext; render() { console.log('assssssssssss', this.props) const { FirstStore,SecondStore } = this.props// 读取方法 //console.log(FirstStore,'aaaaaaaaaaaaaaaaaaaaaaaa') this.props.SecondStore.fn() const { fn, name } = this.props.SecondStore; //从你生成的实例对象中【SecondStore】解构store.js中你使用action定义方法， return ({fn('狗狗萌')} {name} //调用actions定义的方法来修改 observable 的值 {FirstStore} ) } } export default View

在修改值的过程中会发现 打印的数据修改了但是页面上的数据并没有改变
解决方案 store.js中加入
constructor() {
makeObservable(this); }

import { observable, computed, action, autorun, runInAction, makeObservable } from 'mobx'; class Store { @observable name = '小张' constructor() { makeObservable(this); //解决了打印内容修改 ， 但是页面为改变内容的为改变 } // 方法一 makeObservable(this) // 方法二@action.bound @action//.bound //用来声明的函数 fn = (text) => { this.name = text }} export default Store;

    推荐阅读


    上一篇：ECharts|饼图（用ECharts绘制）

    下一篇：网上商城从搭建到推广全流程细节注意点