State 狀態

畫面或系統目前記住的資料與狀況。

先用一句話理解

畫面或系統目前記住的資料與狀況。

打個比方

像表單填到哪、選了哪個選項、是否正在載入。

什麼時候會遇到

表單、篩選、登入狀態、購物車、互動工具都會用到。

再往深一點看

State（狀態）是前端 component 在某個時間點所持有的資料快照，它決定了畫面「現在應該長什麼樣子」。當 state 改變，React 等框架會自動重新渲染對應的畫面，這就是為什麼你改一個輸入框的值，旁邊的字數計算會即時更新。State 的來源可以是使用者輸入、API 回應或路由切換，按照作用範圍分成「只影響單一 component 的本地 state」和「多個 component 共享的全域 state」。State 管理不當是前端 bug 最常見的來源：state 放錯位置、沒有清掉過期資料、或者 state 和畫面顯示不同步，都會讓使用者看到奇怪的行為。

舉個例子

你做一個篩選商品的頁面：使用者選了「價格低到高」並輸入了關鍵字「藍色」，這兩個選擇都是 state。使用者換頁時，如果你沒把篩選條件保留在 URL 參數裡，一重新整理 state 就消失，使用者要重新選過，這就是 state 管理沒做好的典型後果。

常見誤解

- 把 state 全塞進最上層的父元件，所有子元件都靠 props 一層層傳下去，元件一多就變成「props drilling」，改一個資料要改一串檔案。
- 忘記非同步操作（API 呼叫）也是 state 的一部分，沒有管理「載入中」「成功」「失敗」三種狀態，導致按鈕可以重複點擊、畫面顯示錯誤的舊資料。
- 用全域 state 儲存只需要短暫存在的本地資訊（如下拉選單的開關），造成不相關的 component 莫名重新渲染，頁面變卡。