RN Mobx makeAutoObservable 使用示例

makeAutoObservable 是 MobX 6 引入的一个函数，用于自动将对象的属性和方法转换为可观察的（observable）、动作（action）或计算属性（computed）。它简化了 MobX 的使用，减少了样板代码。

一、基本用法

import { makeAutoObservable } from "mobx";

class Store {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

  get doubleCount() {
    return this.count * 2;
  }
}

const store = new Store();
export default store;

解释

1. makeAutoObservable(this):

• 在构造函数中调用 makeAutoObservable(this)，它会自动将 Store 类的实例属性（如
  count）转换为可观察的状态。

• 方法（如 increment 和 decrement）会自动被标记为动作（action）。

• Getter 方法（如 doubleCount）会自动被标记为计算属性（computed）。

2. 可观察状态:

count 是一个可观察的状态，当它的值发生变化时，依赖它的组件或计算属性会自动更新。

3. 动作:

increment 和 decrement 是动作，它们用于修改状态。MobX 会确保这些修改是在事务中进行的，从而保证状态的一致性。

4. 计算属性:

doubleCount 是一个计算属性，它会根据 count 的值自动计算并返回 count * 2。计算属性是惰性的，只有在被访问时才会重新计算。

二、在另一个页面或组件中引用 MobX 的 store，通常需要以下步骤：

1. 创建一个 MobX Store，并使用 makeAutoObservable 自动将属性和方法转换为可观察的。
2. 在 React Native 组件中，使用 @observer 装饰器来订阅 MobX Store 的状态变化。

以下是一个完整的示例，展示如何在另一个页面或组件中引用和使用 store。

// CounterScreen.js
import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import { observer } from "mobx-react"; // 导入 observer
import counterStore from "./store"; // 导入 store

// 使用 @observer 装饰器
@observer
class CounterScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Count: {counterStore.count}</Text>
        <Text style={styles.text}>Double Count: {counterStore.doubleCount}</Text>
        <Button title="Increment" onPress={() => counterStore.increment()} />
        <Button title="Decrement" onPress={() => counterStore.decrement()} />
      </View>
    );
  }
}

// 样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
  },
});

export default CounterScreen;