React 元件是什麼？畫面積木的基本單位

更新日期： 2025 年 4 月 14 日

如果你剛開始接觸 React，可能會不斷看到「元件（Component）」這個詞出現。

打開任何一個 React 專案，幾乎每一行程式碼都在處理元件的建立、使用、傳資料等等。

可以這麼說：元件是 React 的核心概念，也是進入現代前端開發的第一道關卡。

這篇文章會帶你從零開始，了解什麼是元件，它的用途是什麼，為什麼它被稱為畫面的「積木」，還會用一些比喻與範例幫助你快速建立直覺概念。

什麼是元件？一塊畫面，一個邏輯單位

在 React 中，「元件（Component）」就像是一塊畫面上的積木，負責組成畫面的一小部分。

每個元件不只是畫面的一段 HTML，它同時包含了這塊畫面該有的結構（長相）、樣式（外觀）與行為（互動邏輯）。

你可以把它想像成網頁中的一個獨立區塊，擁有自己的小世界，不需要知道整個頁面的細節就能正常運作。

元件 = HTML + CSS + JS 的組合包

傳統的前端開發中，我們會將 HTML、CSS、JavaScript 分開撰寫與管理。

但在 React 的開發邏輯中，這三者會被「封裝」在同一個元件中，變成一個模組化的小功能單位，這是現代前端非常重要的設計趨勢。

簡單來說，一個元件會同時包含：

• JSX 結構：用來描述畫面內容，看起來像 HTML，但實際上是 JavaScript 的語法糖。
• 元件樣式：可以寫在獨立 CSS 檔，也可以直接寫在元件裡，甚至使用 styled-components 或 Tailwind 等工具。
• 行為邏輯：例如按鈕被點擊後要做什麼、資料怎麼改變、要不要顯示某些內容等，這些都會寫在元件中。

這樣的設計讓每個元件都變成「自給自足」的小模組，只要把它放進畫面中，它就能自動完成自己該做的事情。

舉例：一個最簡單的 React 元件

來看看一個最簡單的元件範例：

function MyButton() {
  return <button>點我一下</button>;
}

這裡我們定義了一個名叫 MyButton 的 React 元件，它的功能很單純：在畫面上顯示一個按鈕，按鈕上的文字是「點我一下」。

這個元件包含了：

• JSX 結構：<button>點我一下</button> 告訴我們要在畫面上渲染什麼。
• 雖然現在還沒有樣式與邏輯，但你可以很輕鬆地加上：
  • 樣式：像是 style={{ backgroundColor: 'blue' }} 或 className
  • 行為：像是 onClick={() => alert("你點了按鈕！")}

我們可以像這樣使用這個元件：

function App() {
  return (
    <div>
      <MyButton />
    </div>
  );
}

在畫面上就會出現一顆按鈕，這就是「元件」的基本運作方式。

🔍 補充：元件是函式，不是 HTML

React 元件看起來好像是在寫 HTML，但其實它是 一個 JavaScript 函式。

JSX 也不是原生 HTML，而是 JavaScript 的語法糖，最終會被轉譯成 React.createElement() 的呼叫，再由 React 把它轉成虛擬 DOM（Virtual DOM）與畫面。

為什麼說「元件」是畫面的積木？

我們常用一個比喻來形容 React 的元件概念——像在用樂高蓋網站。

每一個元件就像是一塊積木，具有特定功能與外觀，可以獨立存在、自由組合、重複使用。

比喻：用樂高蓋網站

想像你在組裝一座樂高城堡：

• 你可能有一塊積木代表 城門。
• 另一塊代表 窗戶。
• 還有的代表 塔樓、牆壁、屋頂。
• 每塊積木都可以重複使用，也可以組合成更大的結構。

在 React 中也一樣，你可以：

✅ 重複使用（Reusability）

元件定義一次，就可以在不同地方反覆使用。

<MyButton />
<MyButton />
<MyButton />

像這樣，三個按鈕都是使用同一個 MyButton 元件，寫一次，處處用。

✅ 巢狀組合（Composition）

元件可以組在一起形成「巢狀結構」，就像樂高可以一層疊一層。

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

這裡的 Page 元件就是由 Header、MainContent 和 Footer 三塊積木拼成的。

✅ 分工清楚（Separation of Concerns）

每個元件只負責一件事情：

• Header 負責上方導覽列
• MainContent 處理主畫面內容
• Footer 處理版權與連結

這樣不僅結構清晰，也方便不同開發者分工合作。

實際好處：像拼積木一樣開發

元件化開發就像玩積木一樣靈活，帶來的好處包括：

• 更快開發：建立好一塊積木之後，其他頁面可以直接使用。
• 更容易維護：需要改版時，只要改一個元件，其它地方同步更新。
• 更好測試：每個元件可以單獨測試，不用等整個頁面跑起來。
• 更利協作：開發者可以各自開發自己的元件，降低互相干擾。

延伸思考：元件也可以組成元件

元件不只能「被使用」，還能「組成更大的元件」。這種能力讓我們可以打造從簡單按鈕到整個系統級的 UI 架構。

例如：

function Card() {
  return (
    <div className="card">
      <Avatar />
      <UserName />
      <FollowButton />
    </div>
  );
}

這裡的 Card 元件裡面又組合了三個小元件，這就是元件「巢狀組合」的力量。

元件的兩種寫法（先認識函式型元件）

在 React 中建立元件有兩種主要方式：

1. 函式型元件（Functional Component）
2. 類別型元件（Class Component）

為什麼現在都用函式型元件？

早期 React 使用類別型元件來處理複雜邏輯，例如狀態（state）、生命週期（lifecycle）等。

但自從 React 16.8 推出 Hooks 之後，函式型元件就可以做到以前只能類別型元件才能處理的事情，而且語法更簡潔、更好閱讀。

因此，React 官方已經推薦使用「函式型元件 + Hook」的方式作為開發主流，不只更直觀，也更容易上手。本系列文章也會專注在函式型元件的教學。

函式型元件的基本語法

function Hello() {
  return <h1>Hello, React!</h1>;
}

這段程式碼定義了一個最基本的函式型元件，讓我們來一行一行解析：

如何使用這個元件？

你只要像使用 HTML 標籤一樣來「渲染」這個元件：

<Hello />

React 在看到 <Hello /> 時，會呼叫 Hello 這個函式元件，取得它 return 回來的 JSX，再將它渲染到畫面上。

元件怎麼用？一眼看懂元件的使用方式

在 React 中使用元件就像使用積木一樣簡單，你可以把元件定義好，再放進其他元件中使用。下面用一個簡單例子來說明「定義元件」與「使用元件」的完整流程。

第一步：定義一個元件

function Header() {
  return <header>這是標題</header>;
}

這段程式碼建立了一個名為 Header 的元件。它會回傳一段 JSX，也就是畫面上要顯示的 <header> 標籤與內容。

• Header 是元件名稱，照慣例首字母大寫。
• return 回來的 JSX 是畫面結構。
• 這個元件目前沒有參數或邏輯，是一個靜態的 UI 區塊。

第二步：在其他元件中使用它

function App() {
  return (
    <div>
      <Header />
      <p>這是主內容</p>
    </div>
  );
}

這裡我們定義了另一個元件 App，它是一個「容器型元件」，裡面包含了：

• <Header />：我們剛剛定義的 Header 元件，會被 React 解析成 <header>這是標題</header>。
• <p>：主內容段落。

整個畫面最終會變成：

<div>
  <header>這是標題</header>
  <p>這是主內容</p>
</div>

✅ 小結：函式型元件是開發的起點

• 一個元件 = 一個函式，回傳你要顯示的畫面（JSX）。
• 定義元件 → 使用元件 → 組成畫面。
• 當你掌握這個流程後，就能開始組合畫面、傳遞資料、管理狀態，真正開始用 React 打造應用程式！

結論：元件是 React 世界的基本單位

在 React 的世界中，「元件」是一切的起點。無論你要做的是一個按鈕、表單，還是一個整頁的 App，都是由許多元件組合而成的。

理解元件的概念，就像學會了怎麼使用樂高積木，你將能自由打造任何想要的畫面與互動邏輯。

在下一篇文章中，我們會進一步談談「元件樹」，也就是元件彼此之間如何組合成一棵 UI 樹，以及資料如何在元件之間傳遞。敬請期待！