你現在在哪裡，這份講義要帶你去哪裡
用了三個月的 React 與 TypeScript 之後，多數人會停在一個共同的位置： 、、、 都會用， 照著公司現有的範例可以把需求做完，但心裡其實有一連串沒有答案的問題——
為什麼這個狀態放在這一層，而不是放在用到它的那個元件裡？
為什麼這裡要包 ，隔壁看起來一樣的函式卻沒包？
為什麼資深同事看到 裡 會皺眉頭？
這個泛型 到底在參數化什麼？拿掉會怎樣？
這些問題的共同點是：它們都不是「語法問題」，而是「設計問題」。 語法查文件三分鐘就有答案；設計的理由卻很少被寫下來， 因為它藏在 React 與 TypeScript 本身的設計取捨裡。 這份講義的目標，就是把這些取捨攤開來講清楚—— 讓你之後看公司的程式碼時，能還原出「當初為什麼這樣寫」的推理過程。
內容地圖
全書分成四個部分，順序刻意安排成「先建立模型，再談實踐」：
| 部分 | 章節 | 回答的核心問題 |
|---|---|---|
| React 執行模型 | 第 1 章 心智模型 | React 為什麼是「宣告式」？UI = f(state) 是什麼意思？ |
| 第 2 章 資料流向 | 資料怎麼流動？狀態該放在哪裡？ | |
| 第 3 章 重新渲染 | 渲染何時發生？ 系列工具在解決什麼？ | |
| 第 4 章 Hooks | Hooks 為什麼存在？ 的正確心智模型是什麼？ | |
| 設計實踐 | 第 5 章 元件設計 | 怎麼設計 props？何時拆元件？什麼是好的元件 API？ |
| TypeScript | 第 6 章 型別系統 | 型別、泛型、interface 背後的模型是什麼？ |
| 第 7 章 TS × React | 型別如何落地到元件、hooks 與 API 層？ | |
| 實戰 | 第 8 章 浮動視窗 | 用 portal、全域事件、焦點與拖曳，從零打造一個完整的互動元件。 |
| 第 9 章 綜合實戰 | 把全部觀念組裝成一個完整功能，並學會閱讀既有程式碼。 |
建議的使用方式
每章三步驟。每一章都建議走完這個循環：
讀懂主張：每章都圍繞少數幾個核心主張（用「核心觀念」框標出），先確定你能用自己的話複述。
跟著程式碼推理：範例刻意寫成「公司程式碼會出現的樣子」，讀的時候不要只看結果，要能說出「換一種寫法會發生什麼事」。
回到公司的程式碼找對應：這是最重要的一步。每章的「自我檢測」之後，打開你正在維護的專案，找出一段用得上本章觀念的程式碼，試著解釋它的設計（或指出它的問題）。
建議進度。一週一章、九週完成是舒服的節奏； 第 3、4、6 章份量較重，必要時可以各拆成兩週。 如果你想快速補齊某個主題，各章也可以獨立閱讀， 但第 1 章的心智模型是全書的地基，建議無論如何先讀。
動手環境。準備三樣工具： 一個可以隨手實驗的專案（）、 瀏覽器的 React DevTools 擴充功能（第 3 章會用到 Profiler）、 以及 TypeScript Playground（https://www.typescriptlang.org/play，第 6 章的型別實驗都可以在這裡做）。
版式說明
內文會穿插四種資訊框，各有明確的用途：
| 資訊框 | 用途 |
|---|---|
| 核心觀念（藍） | 本章的關鍵主張，值得反覆咀嚼、能用自己的話複述的程度。 |
| 常見誤解（紅） | 實務上流傳很廣、但不正確或不精確的說法，以及正確的版本。 |
| 實務建議（綠） | 可以直接帶回工作中的具體做法與判斷準則。 |
| 深入原理（紫） | 實作層面的補充，跳過不影響主線，但讀懂會讓你更有把握。 |
術語約定
為了閱讀順暢，全書採以下用語：render 譯為「渲染」、re-render 為「重新渲染」、 component 為「元件」、state 為「狀態」； props、hook、context、effect 等已成慣用語的名詞保留英文。 程式碼註解使用中文，變數命名維持英文，與多數公司的實際情況一致。