什麼是 useState？
useState 是一個 React Hook，當開發者透過它改變資料時，React 偵測到變動便會自動重新渲染畫面，確保使用者看到最新的資訊。
useState 基礎語法
- 從 react 函式庫中匯入 useState 方法
- useState 會回傳一個陣列，通常宣告為
const [變數名, 設定函式] = useState(初始值) - 傳入的參數決定了狀態的起始值，可以是數字、字串、物件或陣列
- 設定函式應以 set 開頭並採用駝峰式命名，例如
setCount - 必須透過設定函式來更新值，嚴禁直接修改變數，否則畫面不會更新
常見錯誤與解決方法
- 無限迴圈：在元件主體中直接呼叫 set 函式，會導致陷入渲染→設定→渲染的循環，建議將更新邏輯放在事件處理或
useEffect中。 - 依賴舊值更新：直接使用
setCount(count + 1)可能讀到舊值，建議改用setCount(prev => prev + 1)確保取得最新狀態。
import { useState } from 'react';
// 定義主元件
const CounterApp = () => {
// 定義計數器狀態，初始值為 0
// count: 當前數值, setCount: 用來更新數值的函式
const [count, setCount] = useState(0);
// 定義輸入框文字狀態，初始值為空字串
const [text, setText] = useState("");
// 定義增加數值的函式
const handleIncrement = () => {
// 使用 callback 寫法確保基於「前一次」的狀態進行更新
setCount(prevCount => prevCount + 1);
};
// 定義重置數值的函式
const handleReset = () => {
// 直接設定為特定數值 (0)
setCount(0);
};
// 回傳 JSX 結構，這就是瀏覽器最終渲染的畫面
return (
<div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
<h1>React useState 範例</h1>
{/* 顯示當前計數狀態 */}
<p>目前計數：{count}</p>
{/* 按鈕區域 */}
<div style={{ marginBottom: '20px' }}>
{/* 綁定點擊事件至 handleIncrement 函式 */}
<button onClick={handleIncrement} style={{ marginRight: '10px' }}>
+1 增加
</button>
{/* 綁定點擊事件至 handleReset 函式 */}
<button onClick={handleReset}>
重置歸零
</button>
</div>
<hr />
{/* 文字輸入區域 */}
<div>
<p>同步顯示輸入內容：{text}</p>
{/* 綁定 onChange 事件，當輸入改變時即時更新 text 狀態 */}
{/* e.target.value 會抓取使用者目前輸入的值 */}
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="請輸入文字..."
/>
</div>
</div>
);
}
export default CounterApp;
