zoukankan      html  css  js  c++  java
  • react mobx全局状态管理

    mobx

    react中 全局数据管理库 可以简单的实现数据的跨组件共享 类似 vue中的vuex

    使用步骤

    1. 安装依赖

      • mobx 核心库
      • mobx-react 方便在react中使用mobx技术的库
      • @babel/plugin-proposal-decoratorsrn 项目支持 es7 的装饰器语法的库
      yarn add mobx mobx-react @babel/plugin-proposal-decorators
      
    2. babel.config.js添加以下配置

        plugins: [
          ['@babel/plugin-proposal-decorators', { 'legacy': true }]
        ]
      
    3. 新建文件 mobxindex.js 用来存放 全局数据

      import { observable, action } from "mobx";
      
      class RootStore {
        // observable 表示数据可监控 表示是全局数据  // es7的装饰器语法 Object.defineProperty
        @observable name = "hello";
        // action行为 表示 changeName是个可以修改全局共享数据的方法
        @action changeName(name) {
          this.name = name;
        }
      }
      
      export default new RootStore();
      
    4. 在根组件中挂载app.js

      通过 Provider 来挂载和传递

      import React, { Component } from 'react';
      import { View} from 'react-native';
      import rootStore from "./mobx";
      import { Provider} from "mobx-react";
      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";  //通过observer观察改变,触发render
      
      @inject("rootStore") // 注入 用来获取 全局数据的
      @observer //  当全局发生改变了  组件的重新渲染 从而显示最新的数据
      class Sub1 extends Component {
        changeName = () => {
         // 修改全局数据   
          this.props.rootStore.changeName(Date.now());
        }
        render() {
          console.log(this);  //this.props下面可以找到全局数据
          return (
            <View><Text onPress={this.changeName}>{this.props.rootStore.name}</Text></View>   //输出"hellow"
          );
        }
      }
      
      export default Index;
      
  • 相关阅读:
    Linux数据备份
    eclipse 中使用等宽字体 inconsolata
    在ubuntu14.04 64位中使用jd-gui
    Fragment 常见问题
    ClassNotFoundException
    符号表的简单使用
    一个简单的词法分析器
    一个简单的语法分析器(后缀式转换)
    火狐无法显示图片
    ftp 匿名访问设置
  • 原文地址:https://www.cnblogs.com/xm0328/p/14451433.html
Copyright © 2011-2022 走看看