react mobx全局狀態管理

mobx

react中 全局數據管理庫 可以簡單的實現數據的跨組件共享 類似 vue中的vuex

使用步驟

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. 新建文件 mobx\index.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;