為什么 React 中 useState 不會立即更新
許多開發者都遇到過這樣的困惑：在調用 setState（如 setCount(1)）后緊接著 console.log(count)，輸出的仍是舊值。這種現象并非個例，而是 React 渲染與調度機制的必然結果。
本文將用清晰的流程與貼近日常的比喻，說明 為什么 useState 不會“即時”生效、React 的渲染如何運作，以及該如何正確地響應與使用狀態更新。
useState 是什么？
useState 是給函數組件添加狀態的 Hook，它返回“當前值”和“更新該值的函數”：
const [count, setCount] = useState(0);表面上很簡單，但一旦出現如下寫法，疑問就來了：
setCount(1);
console.log(count); // 為什么還是 0？useState 是“異步”嗎？
嚴格來講，useState不是像 Promise 那樣的異步 API；但更新不會立刻應用。可以把 setState 理解為向 React 發出的請求：
“請把這個值改成 X，等合適的時機再更新 UI?！?/p>
React 會在下一次渲染周期里應用更新，而不是在當前函數調用過程中立刻改寫變量。因此，在 setState 后立刻讀取，看到的仍是更新前的值。
幕后發生了什么？
React 為了性能，會對更新進行批處理（batching）。當調用 setCount(1) 時，大致流程如下：
- 記錄更新請求（把“把 count 改為 1”加入更新隊列）；
- 等待當前函數執行完畢（確保一次事件中的多次更新可以合并）；
- 觸發重新渲染（以新狀態重新執行組件函數，生成新 UI）。
在觸發新一輪渲染之前，組件函數內部“看見”的仍是舊狀態。
為何 setState 后立刻 console.log 不奏效？
const [name, setName] = useState('John');
const handleClick = () => {
setName('Jane');
console.log(name); // 輸出 "John"，而不是 "Jane"
};原因很簡單：console.log 發生在本次函數執行之內，而狀態變更會在下一次渲染時生效。
正確寫法：函數式更新（functional update）
當新狀態依賴舊狀態時，使用函數式更新可以確保拿到最新的基準值，即便在批處理場景中也安全可靠：
setCount(prev => {
const next = prev + 1;
console.log('更新過程中的值：', next);
return next;
});這樣 React 會把 prev 設為真正的最新舊值，避免競爭條件。
想在“更新后”做事？用 useEffect
需要在狀態變更并完成重新渲染后執行副作用邏輯，使用 useEffect 訂閱目標狀態：
const [count, setCount] = useState(0);
useEffect(() => {
console.log('count 已更新為：', count);
}, [count]);當 count 引發組件完成一次新的渲染后，上述副作用才會運行。
生活類比：點咖啡
- 你：“來一杯卡布奇諾?！保╯etState）
- 咖啡師：“收到！”（React 記錄更新，安排下一輪渲染）
- 你立刻看柜臺：咖啡還沒出現（console.log 仍是舊值）
- 片刻后：咖啡端上來（完成渲染，UI 與狀態同步）
setState 像是下單：并不會立刻得到咖啡，但它已經在路上。
實戰要點與易錯點
- 同一事件中的多次 setState 會被批處理避免在一次點擊中多次依賴“立刻更新”；要么函數式更新，要么把后續邏輯放到 **useEffect**。
- 日志位置要講究想要看到更新后的值，不要在 setState 之后立刻 console.log，而應放在 useEffect 中。
- 新值依賴舊值一律用函數式更新：setX(prev => compute(prev))。
- 副作用不要寫在渲染邏輯里組件函數應保持純粹；副作用（例如請求、訂閱、DOM 操作）放進 **useEffect**。
- 理解渲染是“重跑函數”每次渲染都會重新執行組件函數，useState 返回的值是當次渲染的快照，而非可隨時改變的變量。
小結
- useState 的更新不會在當前函數內立刻生效；
- React 會批處理更新并在下一次渲染中應用；
- 需要基于舊值更新，使用函數式更新；
- 想在更新完成后做事，用 useEffect 訂閱；
- 把 setState 當作“下單”，新 UI 會在下一輪渲染“端上來”。
掌握這些機制，就能寫出更可預測、少坑位的 React 代碼。下次再遇到“為什么狀態沒更新”的困惑時，不妨回想：更新已下單，正在路上。
