React 元件（基於類別與函數式）

React 元件是任何 React 應用程式的構建塊。它們允許您將 UI 分割為獨立的、可重複使用的部分，可以單獨管理和呈現。 React 元件有兩種主要類型：功能元件和類別元件。

功能組件
函數式元件更簡單，並且被編寫為 JavaScript 函數。它們將 props（輸入資料）作為參數並傳回 JSX，它描述了 UI 的外觀。從 React 16.8 開始，函數式元件也可以使用 useState 和 useEffect 等鉤子來處理狀態和副作用。

import React, { useState } from 'react';

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

  return (
    <div>
      <h1 id="Hello-props-name">Hello, {props.name}!</h1>
      <p>You've clicked {count} times</p>
      <button onclick="{()"> setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Welcome;

類別組件
類別元件是在 React 中編寫元件的原始方式。它們擴展了 React.Component 類，並且必須包含傳回 JSX 的 render() 方法。類別元件可以有自己的狀態和生命週期方法，例如 componentDidMount、componentDidUpdate 和 componentWillUnmount。

import React, { Component } from 'react';

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

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

  render() {
    return (
      <div>
        <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>
        <p>You've clicked {this.state.count} times</p>
        <button onclick="{this.handleClick}">Click me</button>
      </div>
    );
  }
}

export default Welcome;

關鍵概念：

• JSX： JavaScript 的語法擴展，看起來像 HTML。 React 元件傳回 JSX 來描述 UI。
• Props：「properties」的縮寫，props 允許您將資料從父元件傳遞到子元件。
• State： 用於儲存影響元件中渲染內容的動態資料的內建物件。只有使用狀態的元件（函數元件或類別元件）才能根據此資料的變更重新渲染。

鉤子（用於功能組件）：

• useState：允許您管理功能元件中的狀態。
• useEffect： 讓您在功能元件中執行副作用（例如，取得資料、更新 DOM）。

React 鼓勵創建小型、可重用的元件，這些元件可以組合起來形成更大的應用程序，保持程式碼庫模組化且更易於維護。

以上是React 元件（基於類別與函數式）的詳細內容。更多資訊請關注PHP中文網其他相關文章！