React Native 使用全局状态管理 MobX

MobX 优点

状态管理

MobX 提供了专业的状态管理解决方案，它能够帮助你组织和管理应用中的状态，并提供了响应式的数据流，使得状态的变化可以自动地驱动组件的更新。

数据响应性

MobX 通过响应式数据流的方式实现了数据的自动监听和更新，当状态变化时，所有依赖该状态的组件都会自动更新，大大简化了数据管理和界面更新的逻辑。

代码结构和维护

MobX 帮助你更好地组织和封装状态，并且通过响应式数据流，使得代码更加清晰和可维护。

安装

yarn add mobx mobx-react

配置

创建

新建一个文件 store.ts 来组织应用的状态

// store.ts
import {observable, action, makeObservable} from 'mobx';

class RootStore {
  // 表示是全局数据
  @observable isLogin = false

  // 变量状态变化，组件会重新渲染
  // 将当前类实例的属性和方法转换为可观察的，自动追踪这个类实例中所有的属性和方法，确保变量的变化能够正确地触发组件的重新渲染
  constructor() {
    makeObservable(this);
  }

  // 这里的 change 方法可以修改全局数据
  @action changeIsLogin(status: any) {
    this.isLogin = status;
  }
}

const rootStore = new RootStore();
export default rootStore;

 在 App.tsx 中挂载

import * as React from 'react';
import { RootSiblingParent } from 'react-native-root-siblings';
import Watermark from '@/components/Watermark';
import { Provider, observer } from 'mobx-react';
import rootStore from '@/utils/store'; // 引入自己建的mobx

import Route from '@/router';

function App(): React.JSX.Element {
  // 全局的 rootStore.isLogin 状态改变，会触发 <Watermark /> 组件的渲染
  const ShowWatermark = observer(() => {
    return (
      rootStore.isLogin ? (<Watermark />) : null
    );
  });

  return (
    <Provider rootStore={rootStore}>
      <RootSiblingParent>
        <Route />
        <ShowWatermark />
      </RootSiblingParent>
    </Provider>
  );
}

// const styles = StyleSheet.create({

// });

export default App;

在函数组件中使用

import rootStore from '@/utils/store';

rootStore.changeIsLogin(true) // 更新登录状态