返回文章列表
2026/3/9 React, 技術
useState:管理組件的「記憶」
useState :管理組件的「記憶」
什麼是 useState?
useState 讓組件能記住資訊(如:輸入框文字、API 回傳的資料)。
在 React 中,組件的畫面是由「資料」驅動的。當資料改變時,畫面必須跟著更新。
useState 是 React 最基礎的 Hook,它的作用是為函數組件(Functional Component)添加「狀態(State)」。
核心觀念:
一般的變數(如let x = 1)改變時,React 並不知道,所以畫面不會動;
只有透過useState定義的變數改變時,React 才會重新渲染(Re-render)畫面。
語法拆解
使用時需要先從 React 引入:
javascript source casejavascript
- state:當前狀態的值(唯讀,不能直接修改)。
- setState:用來更新狀態的「函式」。呼叫它後,React 會帶著新值重新跑一次組件。
- initialValue:狀態的初始值(可以是數字、字串、布林、物件或陣列)。
範例:計數器
javascript source casejavascript
範例:多個狀態與物件處理
javascript source casejavascript
分享這篇技術心得 / Share
若這份筆記對您有所啟發,歡迎分享給更多同好。
延伸閱讀 / Related Cases
React
useEffect:與外部世界互動的橋樑
什麼是 useEffect? 當組件「渲染後」需要執行動作(如:抓取資料、訂閱事件、修改 DOM),就要用 useEffect。 useEffect 讓您在組件「渲染後」執行某些操作。這些操作通常不直接參與畫面繪製,而是與外部世界互動。 核心觀念: - React 的渲染過程應該是純粹的(輸入什麼
React
useRef:掌握 React 的「儲物櫃」與 DOM 操控
什麼是 useRef? useRef 回傳一個帶有 current 屬性的物件。它有兩個最主要的用途: 1. 存取 DOM 元素:直接抓取網頁上的 HTML 標籤(例如讓輸入框聚焦)。 2. 儲存「不需要渲染」的資料:存放在裡面的資料改變時,不會觸發組件重新渲染。 核心觀念: - 如果您希望