在React Native中,組件是構建應用的基本元素。有兩種主要的組件設計模式:有狀態組件(Stateful Components)和無狀態組件(Stateless Components)。
state
對象來存儲狀態數據,並且可以使用生命周期方法來執行特定的代碼。(1) 有狀態組件:
使用案例:計數器應用
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
handleIncrement = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
handleDecrement = () => {
this.setState((prevState) => ({ count: prevState.count - 1 }));
};
render() {
return (
<View>
<Text>Count: {this.state.count}</Text>
<Button title="Increment" onPress={this.handleIncrement} />
<Button title="Decrement" onPress={this.handleDecrement} />
</View>
);
}
}
export default Counter;
在這個例子中,Counter
組件具有狀態,並且使用了state對象來保存和管理計數器的狀態。當按下增加或減少按鈕時,組件會更新其內部狀態,並重新渲染以反映這些變化。
(2) 無狀態組件:
使用案例:純呈現元素
import React from 'react';
import { View, Text } from 'react-native';
const Greeting = (props) => {
return (
<View>
<Text>Hello, {props.name}!</Text>
</View>
);
};
export default Greeting;
在這個例子中,Greeting
組件是一個純呈現元素,它接收name
作為屬性(props
)並將其呈現在UI中。這個組件不需要保存內部狀態,因為它僅依賴於外部傳遞的屬性。
總的來說,選擇有狀態還是無狀態組件取決於組件的功能和需求。有狀態組件適用於具有內部狀態和較複雜邏輯的場景,而無狀態組件適用於僅根據輸入屬性呈現UI的場景。