MobX & React Native 功能组件:我们如何在 React Native 功能组件中实现 mobX?
MobX & React Native Functional Component : How can we implement mobX in React Native Functional Component?
下面的代码只是我在网上找到的例子。
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',
},
})
可悲的是,我在网上找到的大多数关于 React Native 中的 MobX 的示例都用于 Class 组件。
任何人都可以将此代码转换为功能组件吗?
谢谢
这里有一些关于如何在功能组件中使用它的想法。 (注意,我没有测试过代码,但这是给你指明方向的)
1.为Shop Store创建一个class,应该是这样的。
import { observable, computed, action } from "mobx";
export class ShopStore {
@observable price;
@observable quantity;
constructor (value) {
this.id = 9;
this.quantity = 11;
}
@computed get total() {
return this.price * this.quantity;
}
// Use @action to modify state value
@action setPrice = (price) => {
this.price = price;
}
// Use @action to modify state value
@action setQuantity = (quantity) => {
this.quantity = quantity;
}
}
2。在 App.js
中初始化 Mobx 商店
import React from 'react';
import { ShopStore } from './src/mobx/store';
import ShopComponent from "./src/components/ShopComponent";
function App() {
const store = new ShopStore()
return (
<ShopComponent store={store}/>
);
}
export default App;
3。将 mobx 观察器连接到功能组件
import { observable, computed } from "mobx";
import { observer } from "mobx-react";
import React from "react";
import { SafeAreaView, Text, TextInput, StyleSheet } from "react-native";
function ShopComponent(props) {
const { setPrice, setQuantity } = props.store
return(
<SafeAreaView style={styles.container}>
<Text>Price: </Text>
<TextInput value={props.store.price} onChangeText={value => { setPrice(value) }} />
<Text>Quantity: </Text>
<TextInput value={props.store.quantity} onChangeText={value => { setQuantity(value) }} />
<Text>Total (Price and Quantity): {props.store.total() }</Text>
</SafeAreaView>
)
}
export default observer(ShopComponent);
您可以使用没有装饰器的解决方案,您可以使用 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",
},
});
下面的代码只是我在网上找到的例子。
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',
},
})
可悲的是,我在网上找到的大多数关于 React Native 中的 MobX 的示例都用于 Class 组件。
任何人都可以将此代码转换为功能组件吗?
谢谢
这里有一些关于如何在功能组件中使用它的想法。 (注意,我没有测试过代码,但这是给你指明方向的)
1.为Shop Store创建一个class,应该是这样的。
import { observable, computed, action } from "mobx";
export class ShopStore {
@observable price;
@observable quantity;
constructor (value) {
this.id = 9;
this.quantity = 11;
}
@computed get total() {
return this.price * this.quantity;
}
// Use @action to modify state value
@action setPrice = (price) => {
this.price = price;
}
// Use @action to modify state value
@action setQuantity = (quantity) => {
this.quantity = quantity;
}
}
2。在 App.js
中初始化 Mobx 商店import React from 'react';
import { ShopStore } from './src/mobx/store';
import ShopComponent from "./src/components/ShopComponent";
function App() {
const store = new ShopStore()
return (
<ShopComponent store={store}/>
);
}
export default App;
3。将 mobx 观察器连接到功能组件
import { observable, computed } from "mobx";
import { observer } from "mobx-react";
import React from "react";
import { SafeAreaView, Text, TextInput, StyleSheet } from "react-native";
function ShopComponent(props) {
const { setPrice, setQuantity } = props.store
return(
<SafeAreaView style={styles.container}>
<Text>Price: </Text>
<TextInput value={props.store.price} onChangeText={value => { setPrice(value) }} />
<Text>Quantity: </Text>
<TextInput value={props.store.quantity} onChangeText={value => { setQuantity(value) }} />
<Text>Total (Price and Quantity): {props.store.total() }</Text>
</SafeAreaView>
)
}
export default observer(ShopComponent);
您可以使用没有装饰器的解决方案,您可以使用 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",
},
});