React思維進化：一次打破常見的觀念誤解，躍升專業前端開發者（iThome鐵人賽系列書）

27/08/2025 陳泓毓整理

<aside> 📌

中心的專案是 Next.js 專案，不是純 React 專案（可從 package.json 辨別）。原理相通，但路由、SSR 等行為會有差異。

</aside>

CSS 運作原理 - Cascade 與 Specificity

React 資料流

React 的資料流是單向的——資料改變 → 觸發 render → 產生新的 Virtual DOM → Reconciliation（比對新舊差異）→ 只更新有變化的真實 DOM 節點。

flowchart LR
  A[State / Props 改變] --> B[Render 產生新 JSX]
  B --> C[Virtual DOM]
  C --> D[Reconciliation 比對]
  D --> E[Commit 更新真實 DOM]

Render、Mount、Unmount 名詞解釋

<aside> ⚛️

Render = 在腦中畫一張「房子設計圖」（產生 Virtual DOM） Mount = 把房子真的蓋好，出現在地上（首次 commit 到 DOM）

</aside>

• Mount：Component 以 React element 形式首次出現在畫面 → 首次 render + commit
• Re-render：state / props 變了 → 重新 render，不等於 mount
• Unmount：Component 從畫面消失 → 需要清理副作用（計時器、事件監聽等）

Shallow Clone 與 State 比對

React 比對 state 是否改變時，用的是**淺拷貝（Shallow clone）**思維：

• Shallow clone：只複製第一層，巢狀物件仍共用記憶體
• Deep clone：所有層級都複製，完全獨立

React 選擇淺拷貝，因為 reconciliation 只需比對前後差異，不必為每個巢狀層級做深拷貝——那會浪費效能。

實際執行時，state 是唯讀的 const，只能透過 setState 要求 React 在下次 render 給你新的 state。