React 組件

在前面的內容中，我們了解了 React 的基礎知識和入門案例。本節將深入探討 React 中最核心的概念之一 —— 組件。組件是構建 React 應用的基礎，理解組件的工作原理和使用方法，對于掌握 React 開發至關重要。

什么是組件？

在 React 中，組件是具有獨立功能和 UI 的可復用代碼塊。可以將組件看作是構建用戶界面的 “積木”，通過組合不同的組件，能夠搭建出復雜的頁面。

組件就像一個函數，它可以接收輸入（稱為 “props”），并返回 React 元素，用于描述頁面應該呈現的內容。例如，一個按鈕、一個表單或者一個完整的頁面，都可以封裝成組件。

組件的類型

React 中有兩種主要的組件類型：函數組件和類組件。

函數組件

函數組件是用 JavaScript 函數定義的組件。它是最簡單的組件形式，接收 props 作為參數，并返回 React 元素。

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

在 React 16.8 引入 Hooks 之后，函數組件具備了與類組件相同的功能，并且寫法更加簡潔，因此成為了推薦的組件定義方式。

類組件

類組件是基于 ES6 類定義的組件，它需要繼承 React.Component，并且必須實現 render() 方法，該方法返回 React 元素。

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

類組件在 Hooks 出現之前是實現復雜功能的主要方式，雖然現在函數組件更受青睞，但在一些舊項目中仍然會遇到類組件。

組件的屬性（Props）

Props 是組件的輸入參數，用于在組件之間傳遞數據。Props 是只讀的，組件不能修改自身接收的 props，這保證了組件的純函數特性。

傳遞 Props

父組件可以通過在子組件標簽上添加屬性的方式，向子組件傳遞 props。

function App() {return <Welcome name="Alice" age={25} />;
}

接收 Props

子組件通過參數接收父組件傳遞的 props。對于函數組件，props 是函數的參數；對于類組件，props 通過 this.props 訪問。

// 函數組件接收props
function Welcome(props) {return (<div><h1>Hello, {props.name}</h1><p>Age: {props.age}</p></div>);
}// 類組件接收props
class Welcome extends React.Component {render() {return (<div><h1>Hello, {this.props.name}</h1><p>Age: {this.props.age}</p></div>);}
}

Props 的默認值

可以為組件的