MobX &：我们如何在中实现mobX？

Question

下面的代码只是我在网上找到的一个例子。

import { observable, computed } from "mobx";
import { observer } from "mobx-react";
import React from "react";
import { SafeAreaView, Text, TextInput, StyleSheet } from "react-native";
@observer
class Shop extends React.Component {
    @observable price = 9;
    @observable quantity = 11;
    @computed get total() {
            return this.price * this.quantity;
    }
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <Text>Price: </Text>
                <TextInput value={this.price} onChangeText={value => { this.price = value }} />
                <Text>Quantity: </Text>
                <TextInput value={this.quantity} onChangeText={value => { this.quantity = value }} />
                <Text>Total (Price and Quantity): {this.total}</Text>
            </SafeAreaView>
        )
    }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

遗憾的是，大多数关于MobX的例子都是用于类组件的。

有谁能把这个代码转换成一个功能组件呢？

谢谢

Answer 1

您可以使用没有装饰器的解决方案，使用useLocalObservable钩子创建本地组件状态：

const Shop = observer(() => {
  const state = useLocalObservable(() => ({
    price: 9,
    setPrice(price) {
      state.price = price;
    },

    quantity: 11,
    setQuantity(quantity) {
      state.quantity = quantity;
    },

    get total() {
      return state.price * state.quantity;
    },
  }));

  return (
    <SafeAreaView style={styles.container}>
      <Text>Price: </Text>
      <TextInput value={state.price} onChangeText={state.setPrice} />
      <Text>Quantity: </Text>
      <TextInput value={this.quantity} onChangeText={state.setQuantity} />
      <Text>Total (Price and Quantity): {state.total}</Text>
    </SafeAreaView>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});