iT邦幫忙

2023 iThome 鐵人賽

0
Modern Web

React Native的學習與實作系列 第 19

【Day19】React Native設計模式(1)

  • 分享至 

  • xImage
  •  

1. React Native組件設計模式:

在React Native中,組件是構建應用的基本元素。有兩種主要的組件設計模式:有狀態組件(Stateful Components)和無狀態組件(Stateless Components)。

  • 有狀態組件: 這些組件可以保存和管理自己的狀態,並且可以根據這些狀態渲染不同的UI。有狀態組件使用React的state對象來存儲狀態數據,並且可以使用生命周期方法來執行特定的代碼。
  • 無狀態組件: 這些組件通常用於純呈現UI,它們接收屬性(props)作為輸入並返回React元素作為輸出,而不保存內部狀態。這種組件更容易測試和理解,並且在某些場景下具有性能優勢。

2. 有狀態組件和無狀態組件的具體使用案例:

(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中。這個組件不需要保存內部狀態,因為它僅依賴於外部傳遞的屬性。

3. 何時選擇使用哪一種模式:

  1. 有狀態組件:
  • 當組件需要管理內部狀態時: 有狀態組件適用於需要根據用戶交互或其他事件來動態改變和管理數據的情況。
  • 當組件包含複雜的生命週期邏輯時: 有狀態組件可以利用生命週期方法,執行複雜的邏輯,例如在組件創建時或更新時進行數據加載。
  1. 無狀態組件:
  • 當組件只需要根據輸入屬性渲染UI時: 無狀態組件通常用於純呈現元素,僅接受屬性作為輸入,並根據這些屬性渲染靜態的UI。
  • 當組件不需要利用生命週期方法時: 如果組件不需要進行生命週期相關的操作,例如數據加載或清理,則可以使用無狀態組件。

總的來說,選擇有狀態還是無狀態組件取決於組件的功能和需求。有狀態組件適用於具有內部狀態和較複雜邏輯的場景,而無狀態組件適用於僅根據輸入屬性呈現UI的場景。


上一篇
【Day18】自訂元件(2)
下一篇
【Day20】React Native設計模式(2)
系列文
React Native的學習與實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言