Component 元件

可重複使用的 UI 或功能小單位。

先用一句話理解

可重複使用的 UI 或功能小單位。

打個比方

像樂高積木，同一塊可以組在不同地方。

什麼時候會遇到

按鈕、卡片、表單欄位、導覽列、列表項目重複出現時。

再往深一點看

Component（元件）是現代前端的基本組成單位，把一段 UI 的結構、樣式與行為封裝成一個獨立、可重用的模組。React 和 Next.js 的整個程式架構都是由 component 組合而成——一個頁面是 component，頁面裡的表單是 component，表單裡的輸入框也是 component。Component 的核心價值是「改一個地方，到處生效」：你的按鈕顏色要改，只要改 Button component，所有頁面同步更新。Component 設計得太大（一個 component 做太多事）或太小（每個小細節都拆成一個 component）都會讓維護變難，找到合理邊界需要經驗累積。

舉個例子

你在 Next.js 做一個平台，每個使用者卡片都顯示頭像、名字和追蹤按鈕。把這三個元素做成一個 UserCard component，首頁、搜尋結果頁和推薦列表都引用同一個——哪天要加「已追蹤」狀態，只改 UserCard 一個檔案，全站立刻更新。

常見誤解

- 把幾乎一樣的 UI 複製貼上到各頁面，日後要改樣式時要找十幾個地方修改，很容易改漏導致畫面不一致。
- 把太多邏輯塞進同一個 component（資料抓取、格式化、顯示全混在一起），導致難以測試、難以重用，別的頁面要用時只能再複製一份。
- component 的 props 沒有明確型別，傳錯資料時不會立刻報錯，只會在畫面上出現奇怪的空白或 undefined。