React 組件（Components）

React 組件（Components）

在 React 中，組件（Components） 是構建用戶界面的核心。每個 React 應用都是由多個組件組成的，每個組件負責應用的一部分邏輯和界面。組件可以是簡單的元素，或者是包含更多子組件和邏輯的複雜結構。React 的組件化方式使得代碼更加模組化、可重用，並且便於維護。

React 中的組件有兩種主要形式：函式組件 和 類別組件。

---

1. 函式組件（Functional Components）

函式組件是使用 JavaScript 函式來定義的組件。它們是最簡單的 React 組件形式，接收一個 props 對象作為參數，並返回要渲染的 JSX 結構。

範例：

function Welcome(props) {
  return <h1>你好, {props.name}</h1>;
}

• props：函式組件接收 props 物件作為參數，props 是從父組件傳遞下來的資料，用於組件間的數據傳遞。
• JSX 返回值：函式組件會返回一段 JSX，這段 JSX 將會渲染到瀏覽器上。

使用函式組件：

function App() {
  return (
    <div>
      <Welcome name="小明" />
      <Welcome name="小美" />
    </div>
  );
}

這段代碼中，Welcome 組件被調用了兩次，並分別接收了不同的 name 屬性。

---

2. 類別組件（Class Components）

類別組件是使用 ES6 的類別語法來定義的組件。這些組件更適合處理複雜的邏輯，並且可以擁有自己的狀態（state）和生命週期方法。

範例：

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>你好, {this.props.name}</h1>;
  }
}

• this.props：類別組件使用 this.props 來訪問從父組件傳遞過來的屬性。
• render()：類別組件必須實現 render 方法，該方法負責返回組件的 JSX 標記。

使用類別組件：

class App extends Component {
  render() {
    return (
      <div>
        <Welcome name="小明" />
        <Welcome name="小美" />
      </div>
    );
  }
}

---

3. 組件的組合（Composition of Components）

React 組件可以相互嵌套，通過父組件與子組件之間的屬性傳遞來進行組合。這種組合方式讓應用可以根據功能進行模組化設計。

範例：

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

在這個例子中，App 組件組合了 Header、MainContent 和 Footer 三個子組件，形成一個完整的應用結構。

---

4. props（屬性）

props 是從父組件傳遞給子組件的資料。React 組件是純函數（純組件），不會修改 props，但會使用 props 來渲染相應的 UI。

範例：

function Welcome(props) {
  return <h1>歡迎, {props.name}!</h1>;
}

function App() {
  return <Welcome name="小明" />;
}

這裡的 props.name 是父組件 App 傳遞給 Welcome 組件的資料。

---

5. 狀態（State）

狀態（state）是類別組件特有的屬性，用來管理組件內部的數據。當狀態發生變化時，組件會重新渲染。函式組件在 React 16.8 之後可以通過使用 Hooks（例如 useState）來管理狀態。

類別組件中的狀態：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>計數: {this.state.count}</p>
        <button onClick={this.increment}>增加</button>
      </div>
    );
  }
}

• this.state：用來存儲組件的本地狀態。
• this.setState()：用來更新狀態並觸發組件重新渲染。

函式組件中的狀態（使用 Hooks）：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>計數: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

• useState：是一個 Hook，用來在函式組件中使用狀態。它返回一個狀態值和一個用來更新該狀態的函數。

---

6. 生命週期方法（Lifecycle Methods）

在類別組件中，React 提供了一些生命週期方法來管理組件的掛載、更新和卸載過程。常見的生命週期方法包括：

• componentDidMount()：組件掛載後執行。
• componentDidUpdate()：組件更新後執行。
• componentWillUnmount()：組件卸載前執行。

函式組件使用 Hooks（如 useEffect）來模擬這些生命週期方法。

---

7. 使用 Hooks 的函式組件

自 React 16.8 以來，React 引入了 Hooks，允許在函式組件中使用狀態和其他 React 功能。最常見的 Hooks 包括：

• useState：用來在函式組件中管理狀態。
• useEffect：用來管理副作用（例如數據請求、訂閱、手動 DOM 操作）。

---

總結

React 組件是 React 應用的基礎單位，它們可以是簡單的函式組件，也可以是具有複雜邏輯的類別組件。組件通過 props 接收數據，通過狀態來控制自身的行為和渲染結果。隨著 Hooks 的引入，函式組件也能夠處理狀態和生命週期邏輯，讓開發更加靈活。