React 的開發邏輯：為什麼現代前端要用元件？

更新日期： 2025 年 4 月 14 日

還記得第一個網頁是怎麼寫的嗎？

可能是一個 HTML 檔裡擺滿 div、button 和 img，想加點互動再補幾行 JavaScript，CSS 也直接寫在 <style> 標籤裡。

這樣的寫法在小型網頁中沒有問題。但隨著網站功能越來越多，畫面越來越複雜，維護難度就會像滾雪球一樣爆增。

今天改一個按鈕樣式，明天整個版面跑掉；一個功能需要複製貼上同樣的結構好多次，結果改一個地方要改十幾行。

這就是「巨石式開發（monolithic UI）」的痛點：一改動就牽一髮動全身，根本維護地獄。

所以，現代前端開發就開始追求更模組化、更可維護的做法——「元件化」就是這個解法。

什麼是元件化？一種將 UI 拆成小積木的做法

在學 React 之前，我們需要先理解一個觀念：「畫面（UI）不是一張圖，而是很多小零件組合起來的。」

這種將畫面分拆為小零件的開發方式，稱為 元件化（Componentization）。

元件就像是 UI 的樂高積木

想像你在蓋一座樂高房子。

• 如果你用一整塊超大的積木做整棟建築，一改設計就得全部重來，維護困難。
• 如果你是用「窗戶」、「門」、「屋頂」這些小積木拼出來的，未來想換窗戶樣式、加樓層、調整結構，只要動某幾塊積木即可。

這就是元件化的精神。

✅ 一個畫面，不是一張圖片，而是一堆小零件拼出來的結構。

元件（Component）是什麼？

在 React 裡，元件是一段可以重複使用的畫面單元，它包含三個要素：

1. 結構（HTML-like 的 JSX）
2. 樣式（CSS 可內嵌、可引入）
3. 行為/邏輯（JavaScript，例如點擊事件、資料處理）

每個元件像是一個封裝良好的小模組，擁有自己的輸入（props）與內部狀態（state），可以重複使用，也可以跟其他元件組合成更大的畫面。

範例：一個簡單的 Button 元件

以下是 React 裡定義一個按鈕元件的方式：

function Button() {
  return <button>點我</button>;
}

這段程式碼就是定義了一個名為 Button 的元件。

你可以這樣使用它：

<Button />
<Button />
<Button />

這樣的好處是什麼呢？

• 寫法簡潔：不需要重複寫 <button>點我</button> 三次。
• 集中維護：如果你之後想把文字改成「Click me」或加上樣式，只需要改在 Button 元件裡的定義，所有地方都會同步更新。

function Button() {
  return <button className="btn">Click me</button>;
}

✅ 一個改動，所有地方自動更新，避免「一改一堆地方出錯」的災難。

元件可以組合、嵌套、傳資料

你可以把 Button 元件放進另一個元件裡：

function Card() {
  return (
    <div className="card">
      <h2>標題</h2>
      <p>這是一段描述</p>
      <Button />
    </div>
  );
}

甚至可以傳入資料給元件，讓它產生變化（這就會用到 props，之後的文章會深入介紹）：

function Button(props) {
  return <button>{props.text}</button>;
}

<Button text="儲存" />
<Button text="刪除" />

透過這種拆解與組合，你可以用 React 像拼圖一樣構築出完整的 UI 畫面，畫面再複雜也能條理分明。

為什麼這麼重要？

傳統網頁開發常常把所有 HTML 寫在同一個檔案裡、樣式寫在另一個 CSS 檔、互動邏輯再寫在 JS 裡，畫面一變，三個地方都要改，難度和風險都很高。

React 的元件化讓你可以：

• 把畫面、樣式、邏輯封裝在一起
• 重複使用同一塊元件
• 輕鬆修改和擴充
• 組裝出可維護的 UI 架構

小結

這就是為什麼現代前端越來越依賴元件化開發，特別是在大型或多功能的應用中，元件的概念幾乎是必備的前提。

元件化的四大好處：為什麼你一定要學會元件思維？

元件化的價值，不只是「畫面可重用」這麼簡單。

它解決了前端開發中最核心的四個痛點——重複、混亂、團隊衝突，以及難以維護。以下是元件化帶來的四大具體好處：

重複使用（Reusability）：寫一次，到處用

元件最大的特性之一就是 可重用性。

當你定義好一個元件之後，就像做出了一個零件模具，未來無論在哪裡，只要有需求就可以重複使用，完全不用重寫程式碼。

🌰 實際情境：

假設你做了一個 Button 按鈕元件：

function Button() {
  return <button className="primary-btn">送出</button>;
}

之後在其他頁面、其他元件中，只要這樣寫就能用：

<Button />
<Button />
<Button />

如果設計師說：「我們要把按鈕的邊框改成圓角、顏色改藍色」，你只需要修改 Button 的定義一次，所有地方自動更新。

✅ 好處：

• 大幅減少複製貼上的重工
• 讓 UI 的樣式與行為更一致
• 維護起來超方便

模組化（Modularity）：拆小塊，邏輯清晰又好改

元件就像一個個自給自足的小模組，擁有自己的結構、樣式與邏輯。這種 封裝性 讓你可以更清楚地管理整個應用程式的功能。

🌰 實際情境：

你做了一個 ProductCard 元件，專門顯示商品資訊；另一個 ShoppingCart 元件，處理購物車功能。這兩個元件之間不會彼此干擾。

• 修改 ProductCard 不會影響到 ShoppingCart
• 兩個元件可以在不同地方重複使用
• 畫面邏輯分得很清楚，資料流也容易追蹤

✅ 好處：

• 每個元件只處理自己該管的事情
• 出錯容易定位，修改不會牽一髮動全身
• 程式碼結構清楚、邏輯有層次

協作更順暢（Team Collaboration）：各做各的、合作不打架

當多人開發一個前端應用時，如果所有程式都寫在同一頁，彼此很容易踩線、誤改到別人的東西。

元件化讓每位開發者可以負責自己的一塊領域，彼此之間界線明確，合作效率大幅提升。

🌰 實際情境：

假設你是負責開發「使用者卡片」元件的開發者，另一位同事負責「留言區」元件，你們各自開發、測試、上線互不干擾。設計師也能針對元件建立設計規範：

• 所有按鈕用 Button 元件
• 所有輸入框用 InputField 元件
• 元件怎麼用、怎麼排版都事先定好

這就是所謂的 設計系統（Design System），它能夠讓團隊一致地使用相同的 UI 元件與風格。

✅ 好處：

• 團隊分工更順利，職責分明
• 設計與開發能同步溝通、重用相同元件
• 專案規模越大，元件化的效益越明顯

更好測試與除錯（Testing & Debugging）：拆得開，就改得穩

元件是一個一個獨立的模組，你可以針對每個元件單獨測試與調整，不需要整個畫面都跑起來。

這就是所謂的 單元測試（unit test）友好性。

🌰 實際情境：

當某個元件壞掉時，例如 CommentBox 無法正常送出內容，你只需要打開那個元件的程式碼就可以集中處理，而不必去翻整個頁面。

有些情況甚至可以寫自動化測試：

it("should render button with text '送出'", () => {
  render(<Button />);
  expect(screen.getByText("送出")).toBeInTheDocument();
});

✅ 好處：

• 問題容易被定位，修正快速又安全
• 有測試的元件更穩定，不怕更新造成災難
• 每次改動更安心，降低回歸錯誤的風險

小結：元件化帶來的 4 大超能力

為什麼 React 會成為元件化的代表？

React 之所以在前端界打出一片天，不是因為它功能最多、語法最潮，而是它從一開始就徹底貫徹了「元件化」這個核心思想。

React 誕生於 Facebook 團隊內部，是為了解決 Facebook 網站中「UI 太複雜、改一個地方會牽動整頁」的痛點。它的開發哲學與傳統前端工具（例如 jQuery）有本質上的不同：

舊思維：畫面先畫好，再操作 DOM

以前用 jQuery 或原生 JS 操作網頁時，我們的流程大多是：

1. 用 HTML 畫出整個頁面結構
2. 用 CSS 美化樣式
3. 再用 JavaScript 去「找元素」然後改它的內容或樣式（例如 document.querySelector(...)）

這種開發方式的痛點是什麼？

• 元素之間沒什麼結構性，一堆 div 組成整頁，很難理解層級與邏輯
• 畫面改變通常是靠「命令式」語法手動控制（像「請幫我把這個文字改掉」）
• 當資料變動時，你得自己記得哪些地方要更新畫面，漏掉就出 bug

React 思維：畫面 = 資料的函數

React 的口號是：

UI is a function of state（畫面是由資料決定的）

它的開發邏輯是：

• 畫面不是「畫出來的」，而是「算出來的」
• 根據當前的資料（state、props），React 自動決定畫面要長什麼樣
• 當資料改變時，不用你手動操作 DOM，React 自己會更新畫面

React 的三大元件化特點

1️⃣ 你看的不是 div 樹，是「元件樹」

在 React 裡，畫面是由一層一層的元件組合而成，像這樣：

<App>
  <Navbar />
  <MainContent>
    <ArticleList />
    <Sidebar />
  </MainContent>
  <Footer />
</App>

每個標籤其實都是一個元件，畫面就像一棵「元件樹」，而非一堆平鋪的 HTML。

✅ 結構清楚、邏輯分層、畫面有邏輯地拆分

2️⃣ 資料決定畫面（Data → UI）

在 React 中，你不需要手動改畫面，只要改資料，畫面就會自動更新。

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

return (
  <div>
    <p>你點了 {count} 次</p>
    <button onClick={() => setCount(count + 1)}>點我</button>
  </div>
);

點按鈕時，只是改變了 count 的值，React 會重新渲染整個畫面，並自動顯示最新值。

✅ 你不再關心「要改哪個元素」，只專注於「資料變了什麼」

3️⃣ 像樂高一樣的組裝式開發

React 鼓勵用元件思維構建畫面：

• 小元件：按鈕、輸入框、標題
• 中型元件：表單、商品卡片、導覽列
• 大型元件：整頁畫面、模組組合

你可以像拼樂高一樣，把元件一層層嵌套組合，複雜的畫面也能拆解得乾淨俐落。

✅ 一個畫面就像一組零件結合而成，清楚又好維護

不是只有 React 用元件，為什麼還要學它？

沒錯，Vue、Svelte、Angular 都支援元件化，也都有各自的優勢。但 React 能成為元件化代表，有它不可取代的幾個關鍵特色：

純 JavaScript 的思維

React 強調邏輯與畫面綁在一起，使用 JSX 的寫法讓你在一個檔案中完成：

• 畫面結構（JSX）
• 行為邏輯（事件處理、條件判斷）
• 狀態控制（state、props）

這讓你更深入理解 JavaScript 本質，學會 React 就等於更精通 JS。

✅ React 是少數讓你「學語法的同時，也學邏輯」的框架。

企業應用廣泛，工作機會多

React 是目前最多公司採用的前端框架之一，無論是新創公司還是大型企業（像 Meta、Airbnb、Netflix、Uber）都在用。

在台灣與全球的前端職缺中，「會 React」幾乎是基本條件。

✅ 學會 React，不只是技術進步，也為職涯打下基礎。

3. 生態系完整，功能整合一條龍

React 的生態圈非常成熟，你幾乎可以找到任何你需要的輔助工具：

• Vite / Create React App：快速建專案
• Next.js：支援 SSR、路由、SEO 的框架
• Tailwind CSS：搭配 React 用的高效率 CSS 工具
• React Router / React Query / Redux / Zustand：狀態管理、資料請求與路由處理樣樣俱全

你可以自由組合工具，打造適合你需求的開發環境。

✅ React 不只是一個框架，更是一整套現代前端工具鏈的核心。

為什麼 React 值得學？

React 不只是你在履歷上能寫的一項技能，更是一種現代前端開發的思維方式。

當你掌握了元件化、資料驅動與組裝式開發，你就能寫出更清楚、可維護、可擴展的網頁應用程式。

結語：先理解「為什麼」，再動手寫「怎麼做」

很多初學者學前端時一頭栽進語法和工具，但卻搞不懂為什麼要這樣做。

元件化不是流行用語，而是為了解決「複雜 UI 無法維護」這個老問題。

而 React，就是把這套邏輯做到極致的框架之一。

接下來，我們會從 JSX 開始，逐步帶你掌握 React 的開發核心，學會如何寫出乾淨、可維護的現代前端程式碼。