React 元件：打造積木式 UI 的核心概念
在 React 的世界裡，元件 (Component) 扮演著至關重要的角色。它們是構成使用者介面 (UI) 的基本 building blocks，如同積木一般，可以組合成複雜的應用程式。
什麼是元件？為什麼需要元件？
元件是一個獨立且可重複使用的程式碼片段，用於描述 UI 的一部分。它可以是一個按鈕、一個輸入框、一個導航列，甚至整個頁面。
優點
- 可重用性：相同的元件可以在不同的地方重複使用，減少程式碼冗餘。
- 可維護性：元件之間的獨立性使得修改元件不影響其他元件，降低維護成本。
- 可測試性： 元件可以獨立進行測試，確保其功能的正確性。
- 提高開發效率： 元件化的架構讓團隊成員可以並行開發不同的元件，加快開發速度。
- UI 結構清晰： 將 UI 拆分為小的、易於管理的元件，使程式碼結構更加清晰。
類型
1.Functional Components (函式元件)
它們接收 props 作為輸入，並返回 JSX 描述的 UI。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
需要 state 和生命週期方法的元件則可以透過 Hooks 來實現。
2. Class Components (類別元件)
它們必須繼承 React.Component，並實現 render() 方法，該方法返回 JSX 描述的 UI。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
</div>
);
}
}
類別元件擁有 state 和生命週期方法，可以更好地控制元件的行為。
（注意：由於 Functional Components 搭配 Hooks 的靈活性與簡潔性，Class Components 的使用正在逐漸減少。）
元件的組合與巢狀結構
元件可以組合在一起，形成更複雜的 UI。一個元件可以包含多個子元件，子元件又可以包含更多的子元件，形成巢狀結構。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Alice" />
<Welcome name="Bob" />
<Welcome name="Charlie" />
</div>
);
}
總結
React 元件是打造積木式 UI 的核心概念。透過將 UI 拆分為獨立且可重複使用的元件，可以提高程式碼的可重用性、可維護性和可測試性，從而提升開發效率和程式碼品質。
