1.自訂元件的重要性

在React Native開發中，自訂元件是一種關鍵的實踐，因為它們允許開發者創建可重用和模組化的UI元素。這節將解釋為何自訂元件是重要且有益的：

• 模組化性和重用性： 自訂元件可以被設計成簡單、可重用的構建塊，使得應用程式開發更為模組化，同時提高代碼的可重用性。
• 可維護性： 透過將相似的功能或外觀放在單獨的元件中，使得代碼更易於理解、維護和擴展。
• 代碼組織： 使用自訂元件可以更好地組織代碼結構，使其更具有邏輯性，並促進團隊協作。
• 可讀性： 自訂元件提高了代碼的可讀性，因為它們通常具有自己的API和文件，使其他開發者更容易理解元件的作用。

2. 自訂元件的基本語法

React Native的自訂元件基本上分為兩種：Class Component（類別元件）和 Functional Component（函數元件）。我們可以包括兩種方式：使用<class>和使用<function>定義元件。同時，講解如何導出元件並在應用程式中使用它。

// Class Component
import React, { Component } from 'react';
import { View, Text } from 'react-native';

class MyComponent extends Component {
  render() {
    return (
      <View>
        <Text>Hello, I am a Class Component!</Text>
      </View>
    );
  }
}

// Functional Component
import React from 'react';
import { View, Text } from 'react-native';

const MyComponent = () => {
  return (
    <View>
      <Text>Hello, I am a Functional Component!</Text>
    </View>
  );
};

export default MyComponent;

3. Props和State的應用

<props>用於將數據傳遞到元件，而<state>用於管理元件的內部狀態。提供實例展示，如何通過這兩者進行數據的傳遞和管理。

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const MyComponent = (props) => {
  const [count, setCount] = useState(0);

  const handlePress = () => {
    setCount(count + 1);
  };

  return (
    <View>
      <Text>{props.title}</Text>
      <Text>Count: {count}</Text>
      <Button title="Increase Count" onPress={handlePress} />
    </View>
  );
};

export default MyComponent;

4. 生命週期方法

<componentDidMount>和<componentWillUnmount>。這兩個生命週期方法可用於執行在元件掛載和卸載時需要進行的操作，以實現更高級的功能。

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class MyComponent extends Component {
  componentDidMount() {
    console.log('Component is mounted');
    // 可以在這裡執行初始化操作
  }

  componentWillUnmount() {
    console.log('Component will unmount');
    // 可以在這裡清理資源或取消訂閱
  }

  render() {
    return (
      <View>
        <Text>Hello, I am a Class Component!</Text>
      </View>
    );
  }
}

export default MyComponent;