状态管理 mobx 使用

本文讲解的是 mbox 在 react-native 项目中的使用

中文文档： cn.mobx.js.org/

使用步骤

1、安装依赖

• mobx 核心库
• mobx-react 方便在react中使用mobx技术的库
• @babel/plugin-proposal-decorators 让rn项目支持es7的装饰器语法的库

yarn add mobx mobx-react @babel/plugin-proposal-decorators

2、在 babel.config.js 添加以下配置

plugins:{
  ['@babel/plugin-proposal-decorators',{'legacy':true }
}

3、新建文件 src/mobx/index.js 用来存放全局数据

import {observable,action} from "mobx";
class RootStore {
  // abservab1e 表示数据可监控 表示是全局数据
  // 装饰器语法，增加功能  通过  Object.defineProperty 实现
  @observable name="hello";
  
  // action行为表示changeName是个可以修改全局共享数据的方法
  @action changeName(name){
    this.name=name
  }
}

export default new Rootstore();

4、在根组件中挂载

通过Provider来挂载和传递

import React,{Component} from 'react';
import {View} from 'react-native';
import rootStore from "./src/mobx";
import {Provider} from "mobx-react";
import Sub1 from './Sub1';

class Index extends Component{
  //正常
  render(){
    return (
      <View>
        <Provider rootStore={rootStore} >
          <Sub1></Sub1>
        </Provider>
      </View>
    )
  }
}

5、其他组件中使用

import React, {Component} from 'react';
import {View,Text} from 'react-native';
import {inject,observer} from "mobx-react";

@inject("rootStore") // 注入用来获取全局数据的 到 props 上
@observer // 当全局发生改变了组件的重新渲染从而显示最新的数据
class Subl extends Component {
  changeName =()=> {
    //修改全局数据
    this.props.rootStore.changeName(Date.now());
  }
  render(){
    console.log(this);
    return (
      <View><Text onPress={this.changeName}>{this.props.rootStore.name}</Text></View>
    )
  }
}
export default Index;

🎈🎈

期待收到您的点赞关注收藏，您的关注是对我莫大的鼓励，谢谢😊

有疑问请留言交流✌