mobx6.x状态管理

安装

yarn add mobx || npm install mobx --save
// mobx-react-lite仅支持函数组件，mobx-react 两种组件都支持
yarn add mobx-react || npm install mobx-react

// ts需要安
yarn add @babel/plugin-proposal-class-properties

// tsconfig.json配置
"useDefineForClassFields": true
//babel.config.js配置
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": false }]
  ]

使用

1. 首先src/store/modules/Timer.ts

   import { makeAutoObservable } from "mobx"
   
   class Timer {
     secondsPassed = 0
     constructor() {
       makeAutoObservable(this)
     }
     increaseTimer() {
       this.secondsPassed += 1
     }
     // 异步请求
     async getBanner() {
       const res = await getBanner()
       if (res.code === 200)
         runInAction(() => {
           this.bannerList = res.banners
         })
     }
   }
   export default Timer
   
   

2. 其次src/store/index.tsx

   import Timer from "@/store/modules/Timer";
   
   const store = {
     timer: new Timer()
   }
   
   export default store
   
   

3. 组件使用App.tsx

   import Navigator from "@/navigator/index";
   
   import React from "react";
   // 从mobx-react库中导出Provider组件
   import { Provider } from "mobx-react";
   // 导出自定义的store由mobx管理的数据
   import store from "@/store/index";
   import { StatusBar } from "react-native";
   
   const App = () => {
     return (
     { // 使用Provider 添加一个store属性 }
       <Provider store={store}>
         <Navigator/>
         <StatusBar
           backgroundColor="transparent"
           barStyle="dark-content"
           translucent
         />
       </Provider>
     );
   };
   
   export default App;
   
   

4. 页面中使用

   import { Button, Text, View } from "react-native";
   import { inject, observer } from "mobx-react";
   import React from "react";
   
   const Home = (props) => {
     const onPress = () => {
       props.store.timer.increaseTimer()
     }
     return (
       <View>
         <Button onPress={onPress} title="按钮" />
         <Text>{ props.store.timer.secondsPassed }</Text>
       </View>
     );
   };
   // 这里需要使用 inject observer ，inject中的字符需要和Provider的属性名称对应
   export default inject('store')(observer(Home));