A 「該用哪個 hook」決策速查
| 你的需求 | 工具與依據 |
|---|---|
| 值改變時畫面要跟著變 | （第 4 章） |
| 值可以從其他 state／props 算出來 | 不要開 state，渲染時用 算（第 2 章） |
| 計算昂貴，或需要穩定引用給 memo／依賴 | ／（第 3 章） |
| 值改變但畫面不需要反應（計時器 id、連線實例、最新值鏡像） | （第 4 章） |
| 需要與外部系統同步（訂閱、連線、DOM API、資料抓取） | ＋cleanup（第 4 章） |
| 多個狀態總是一起變、轉移規則複雜 | ＋標記聯集 action（第 4、6 章） |
| 整棵樹要讀同一份低頻資料 | ＋自訂 hook 封裝（第 2 章） |
| 兩個元件出現重複的 state＋effect 組合 | 抽自訂 hook（第 4 章） |
B 高頻型別速查
| 寫法 | 意思與典型用途 |
|---|---|
| 任何可渲染內容；children 與插槽 props 的預設選擇 | |
| 輸入框 onChange 事件； 由此而來 | |
| 原生元素的全部 props；包裝元件時做交集擴充 | |
| 初始值代表不了完整型別時手動標註 | |
| ／／ | 從完整模型演算出 patch／子集型別 |
| 鍵值查找表 | |
| 、 | 從 的值推導字面量聯集（單一事實來源） |
| （type guard） | 自訂收窄函式；搭配 處理邊界資料 |
| 空集合：窮盡檢查哨兵、禁止欄位出現（） |
C 動手練習：把公司程式碼當教材
以下練習全部以你正在維護的專案為對象，每題 30–60 分鐘， 按章節順序做完，觀念就真正落地了：
（第 1 章）找一個元件，把它的渲染輸出手畫成「狀態 → 畫面」的對應表： 列出所有 state 與 props，以及每種組合下畫面的差異。畫不出來的元件，通常正是難維護的元件。
（第 2 章）在專案裡找出一個「用 同步衍生資料」的例子 （搜尋 出現在 effect 裡的地方），改成渲染時計算，確認行為不變。
（第 2 章）挑一個 context，回答：它的 value 多久變一次？ 有多少 consumer？變動時哪些元件會重新渲染？用 React DevTools 驗證你的答案。
（第 3 章）打開 Profiler，錄一次你們產品裡「打字」或「勾選」的互動， 找出渲染範圍最大的一次更新，解釋每個被渲染的元件「為什麼在名單裡」。
（第 3 章）找一個被 包住的元件， 逐一檢查它的每個 props 的引用是否穩定，判斷這個 memo 是否真的在生效。
（第 4 章）找一個依賴陣列被 壓掉警告的 effect， 還原「當初為什麼要壓」，然後用函數式更新、 或搬移邏輯把 disable 拿掉。
（第 5 章）找出專案裡 props 最多的元件，把它的 props 分成 「資料／行為／外觀設定」三類，提出一個用 variant 與插槽收斂的重構草案（不用真的改，寫下來就好）。
（第 6 章）找一組「多顆布林互相牽制」的狀態，設計出對應的標記聯集， 並在 switch 裡加上 窮盡檢查。
（第 7 章）追蹤一個 API 回應的型別旅程：從宣告處出發， 經過幾層到達元件？中間有沒有 ？邊界有沒有驗證？畫出這條鏈。
（第 8 章）找出專案（或你們用的元件庫）裡的 Modal／Drawer／Tooltip： 它用 portal 嗎？ESC 與外部點擊怎麼處理？開啟時焦點去哪、關閉時回到哪？ 對照第 8 章的零件清單，找出它多做或少做了什麼。
（第 9 章）用 9.7 節的十二個問題完整掃一個你常改的模組， 把答案寫成半頁筆記——這份筆記就是你理解該模組設計的證明。
D 延伸資源
React 官方文件（https://react.dev/learn）—— 本講義多次呼應的 Thinking in React、You Might Not Need an Effect、 Preserving and Resetting State 是最值得精讀的三篇。
TypeScript Handbook（https://www.typescriptlang.org/docs/handbook/）—— 搭配第 6 章讀 Narrowing、Generics、Mapped Types。
TypeScript Playground（https://www.typescriptlang.org/play）—— 驗證型別行為的最快方式，hover 即見推斷結果。
React DevTools Profiler —— 第 3 章所有效能主張的量測工具； 「先量測再優化」的原則靠它落實。
TanStack Query 文件（https://tanstack.com/query）—— 伺服器狀態管理的概念章節寫得極好，是第 2 章觀念的工業級延伸。
zod（https://zod.dev）—— 邊界驗證與型別單一來源的實作。
—— 全書完。願你下次打開公司的程式碼時，看到的是一連串可以被理解的決策。 ——