初學者必讀：網頁中的「狀態」是什麼？

更新日期： 2025 年 3 月 27 日

如果你是剛開始學習前端或網頁開發的新手，一定聽過「狀態（state）」這個詞。

但它到底是什麼？為什麼開發者常說「這是狀態的問題」？

本篇文章將從一個非常直觀的角度切入——畫面上的資料為什麼會變？

帶你一步步理解網頁中的「狀態」，並透過日常生活中的例子，幫助你建立起對這個抽象概念的直覺認知。

什麼是「狀態」？

在前端開發中，「狀態（state）」這個詞常常出現，但它其實沒有你想像中那麼難懂。

你可以先這樣想：

👉 狀態，就是畫面上資料的「當下狀況」。

只要是會影響畫面顯示的資料，它就是一種「狀態」。

更正式一點的說法是：

狀態是「一組影響使用者介面（UI）外觀或行為的資料」。

舉個簡單的例子：

假設你打開一個網站，畫面上有一個「登入」按鈕。

當你登入之後，這個按鈕變成了「登出」或「歡迎，XXX」。這就是因為「登入狀態」這筆資料改變了，導致畫面也跟著更新。

也就是說，只要畫面有東西會變，那背後一定有某些資料也跟著變了，這些資料就是所謂的「狀態」。

你可以把「狀態」想像成畫面背後的一張表格，裡面記錄了目前畫面該怎麼呈現，例如：

這些值一改，畫面就會立刻跟著更新，像是出現提示訊息、按鈕變色、清空輸入框等等。

flowchart TD
    subgraph 狀態資料["狀態資料 State"]
        A1["使用者登入: false"] 
        A2["使用者登入: true"]
        C1["購物車商品: 0"]
        C2["購物車商品: 2"] 
        E1["表單驗證: 失敗"] 
        E2["表單驗證: 成功"]
    end
    
    subgraph UI畫面["UI畫面 Interface"]
        B1["登入按鈕"]
        B2["顯示「歡迎, 使用者」"]
        D1["顯示「購物車為空」"]
        D2["顯示「購物車(2)」"]
        F1["顯示錯誤訊息"]
        F2["顯示「送出成功」"]
    end
    
    A1 --> B1
    A2 --> B2
    C1 --> D1
    C2 --> D2
    E1 --> F1
    E2 --> F2
    
    style A1 fill:#e6f7ff,stroke:#1890ff,stroke-width:1px
    style A2 fill:#e6f7ff,stroke:#1890ff,stroke-width:1px
    style C1 fill:#e6f7ff,stroke:#1890ff,stroke-width:1px
    style C2 fill:#e6f7ff,stroke:#1890ff,stroke-width:1px
    style E1 fill:#e6f7ff,stroke:#1890ff,stroke-width:1px
    style E2 fill:#e6f7ff,stroke:#1890ff,stroke-width:1px
    
    style B1 fill:#f6ffed,stroke:#52c41a,stroke-width:1px
    style B2 fill:#f6ffed,stroke:#52c41a,stroke-width:1px
    style D1 fill:#f6ffed,stroke:#52c41a,stroke-width:1px
    style D2 fill:#f6ffed,stroke:#52c41a,stroke-width:1px
    style F1 fill:#f6ffed,stroke:#52c41a,stroke-width:1px
    style F2 fill:#f6ffed,stroke:#52c41a,stroke-width:1px

為什麼要管「狀態」？

你可能會想：「那我就讓畫面改一改就好了啊，幹嘛要特別知道什麼是狀態？」

這裡有一個關鍵的觀念：

👉 使用者介面不是死的，它是活的。

現代的網站和應用程式（App）大多都有豐富的互動功能，幾乎不可能是完全靜態的。

也就是說，畫面會根據使用者的操作而改變，這些變化都依賴狀態的變化。

來看幾個實際的例子：

🔒 使用者登入畫面：

• 初次進來顯示「登入」按鈕
• 使用者輸入帳密後按下登入 → 畫面變成「歡迎，小明」，還多出個「登出」按鈕
• 發生的事：使用者的「登入狀態」從 false 變成 true，畫面根據狀態更新

🛒 購物車：

• 一開始購物車是空的 → 畫面顯示「目前沒有商品」
• 加入一項商品後 → 畫面改為「已加入：口紅」並顯示總金額
• 發生的事：購物車的商品列表（狀態）發生變化，畫面因此改變

📄 表單送出：

• 使用者填資料 → 按下送出
• 若填寫不完整 → 畫面出現錯誤訊息：「請填寫所有欄位」
• 若填寫正確 → 畫面變成「感謝您，資料已送出成功」
• 發生的事：驗證結果的狀態不同，導致顯示內容不同

這些例子都顯示了一個重點：

UI（畫面）之所以會變，是因為它「聽著」某些資料的變化，而那些資料就是「狀態」。

用生活例子理解「狀態」

光講定義可能還是太抽象，現在我們用幾個生活中常見的網頁操作來舉例，讓你更具體地感受到「原來這就是狀態！」

購物車：商品列表、數量與總金額都是狀態

想像你正在逛某個購物網站，看到一支不錯的筆電，點了「加入購物車」：

• 畫面右上角的購物車 icon 從 0 變成 1
• 畫面上跳出提示：「已加入筆電」
• 點進購物車頁面，你會看到這支筆電的名稱、價格、數量，以及目前的總金額

這整個過程，背後其實是有一組狀態在默默幫你記錄事情：

每當你加入或移除商品，這些狀態都會變動，而畫面就是根據這些狀態來「重新渲染」。
也就是說：狀態變了，UI 就跟著變。

表單輸入：每個欄位的內容都是狀態

再來看看一個非常常見的例子——註冊表單。

假設你正在填寫一個註冊頁面，有以下欄位：

• 姓名
• 信箱
• 密碼
• 同意服務條款的勾選框
• 一個「送出」按鈕

在這個表單中，每一個輸入的值、是否出現錯誤訊息、送出後的成功提示，全部都是狀態。

舉例：

根據這些狀態，UI 會顯示或隱藏錯誤訊息、讓送出按鈕變成不可點擊、或顯示「註冊成功」畫面。

這一切的控制核心，就是「狀態」。

登入系統：登入與否決定畫面內容

再來是一個幾乎每個網站都會有的功能——登入系統。

你打開一個網站時，畫面可能會這樣變：

• 未登入時：顯示登入表單、註冊按鈕、訪客導覽內容
• 登入成功後：顯示「歡迎，小明！」、「登出」按鈕，以及個人化的資訊或服務

這背後最主要的狀態就是：

登入成功 → isLoggedIn 變成 true → 畫面整個切換成會員狀態，這就是「狀態驅動介面」的典型例子。

什麼時候會用到「狀態」？

當你開始寫網頁時，幾乎每一個互動功能都會牽涉到「狀態」的變化與管理。下面是一些你未來一定會遇到的場景，每一個都會需要你管理狀態：

🔄 切換分頁／標籤頁（Tabs）

• 使用者點選不同的頁籤 → 狀態 activeTab = "商品資訊" → UI 顯示對應的內容

🔲 顯示或隱藏 Modal、彈出視窗

• 點按「查看詳情」 → isModalOpen = true → 顯示詳情視窗
• 按下關閉按鈕 → isModalOpen = false → 隱藏視窗

📝 表單資料與錯誤提示

• 使用者每輸入一個字 → 狀態更新
• 驗證失敗 → 狀態 error = "請填寫正確信箱" → 顯示錯誤訊息

📑 分頁、排序、搜尋

• 使用者搜尋「iPhone」 → searchKeyword = "iPhone"
• 使用者點選「價格由低到高」 → sort = "price-asc"
• 畫面上的商品清單會根據這些狀態重新篩選與排序

🔐 使用者登入狀態

• isLoggedIn = true → 顯示個人資料、會員功能
• isLoggedIn = false → 顯示登入／註冊選項

⏳ 載入資料與錯誤處理

• 開始發送 API → isLoading = true → 顯示「載入中」
• 回傳成功 → data = {...} → 顯示內容
• 回傳失敗 → error = "無法連線伺服器" → 顯示錯誤畫面

小結：狀態，其實就是「畫面會變的原因」

對初學者來說，與其死記什麼是 state，不如這樣記：

只要畫面會變，背後就一定有「狀態」改變了。

你可以透過觀察使用者操作後「畫面有什麼變化」，來反推有哪些資料是狀態。

等到你學習 React、Vue、或其他前端框架時，會發現這些框架都在幫助你更有效地管理狀態，讓畫面自動跟著資料變化而更新。