| 第一篇 暖身準備 |

1-1 React 是什麼

1-2 學好 React 所需要的 JavaScript 基本功

1-3 React 開發環境建置的門檻

1-3-1 安裝 Node.js

1-3-2 Create React App

1-3-3 基於 React 的進階框架



| 第二篇 React 的畫面管理機制 |

2-1 DOM 與 Virtual DOM

2-1-1 DOM

2-1-2 Virtual DOM

2-2 建構畫面的最小單位：React element

2-2-1 什麼是 React element

2-2-2 React element 的子元素

2-2-3 React element 在建立後是不可被修改的

2-2-4 React element 與 DOM element 的屬性對應和差異

2-3 Render React element

2-3-1 React DOM 與 root

2-3-2 React 只會去操作那些真正需要被更新的 DOM element

2-3-3 瀏覽器環境以外的 React 畫面繪製

2-4 JSX 根本就不是在 JavaScript 中寫 HTML

2-4-1 什麼是 JSX 語法

2-4-2 以 Babel 來進行 JSX 語法的轉譯

2-4-3 新版 JSX transformer 與 jsx-runtime

2-5 JSX 的語法規則脈絡與畫面渲染的實用技巧

2-5-1 嚴格標籤閉合

2-5-2 JSX 語法中的資料表達

2-5-3 畫面渲染邏輯

2-5-4 為什麼一段 JSX 語法的第一層只能有一個節點

2-6 單向資料流與一律重繪渲染策略

2-6-1 單向資料流

2-6-2 實現單向資料流的 DOM 渲染策略

2-6-3 React 中的一律重繪渲染策略

2-7 畫面組裝的藍圖：component 初探

2-7-1 什麼是 component

2-7-2 定義 component

2-7-3 呼叫 component

2-7-4 Import 與 export component

2-7-5 Props

2-7-6 父 component 與子 component

2-7-7 Component 的 render 與 re-render

2-7-8 為什麼_component 命名中的首字母必須為大寫

2-8 React 畫面更新的發動機：state 初探

2-8-1 什麼是 state

2-8-2 useState 初探

2-8-3 useState 的範例演示

2-8-4 關於 state 的補充觀念

2-9 React 畫面更新的流程機制：reconciliation

2-9-1 Render phase 與 commit phase

2-9-2 Reconciliation

2-9-3 setState 觸發的 re-render 會連帶觸發子 component 的 re-render



| 第三篇 State 資料的管理與維護 |

3-1 如何在子 component 裡觸發更新父 component 的資料

3-1-1 React 並沒有子 component 向上溝通父 component 的專門機制

3-1-2 在子 component 中觸發更新父 component 的 state 資料

3-2 深入理解 batch update 與 updater function

3-2-1 Batch update

3-2-2 Updater function

3-3 維持 React 資料流可靠性的重要關鍵：immutable state

3-3-1 什麼是 mutate

3-3-2 保持 state 的 immutable

3-4 Immutable update

3-4-1 物件資料的 immutable update 方法

3-4-2 陣列資料的 immutable update 方法

3-4-3 巢狀式參考型別的複製誤解



| 第四篇 Component 的生命週期與資料流 |

4-1 Component 的生命週期

4-1-1 Component 的三大生命週期

4-1-2 Function component 沒有提供生命週期 API

4-2 Function component 與 class component 關鍵區別

4-2-1 Class component 的 this.props 在非同步事件中的存取陷阱

4-2-2 Function component 會自動「捕捉」render 時的資料

4-3 每次 render 都有自己的 props、state 與 event handler 函式

4-3-1 每次 render 都有其自己版本的 props 與 state

4-3-2 每次 render 都有其自己版本的 event handler 函式

4-3-3 Immutable 資料使得 closure 函式變得可靠而美好



| 第五篇 Effect 與 hooks |

5-1 React 中的副作用處理：effect 初探

5-1-1 什麼是 effect

5-1-2 React component function 中的副作用

5-1-3 useEffect 初探

5-1-4 每次 render 都有其自己版本的 effect 函式

5-1-5 每次 render 都有其自己版本的 cleanup 函式

5-2 useEffect 其實不是 function component 的生命週期 API

5-2-1 宣告式的同步化，而非生命週期 API

5-2-2 Dependencies 是一種效能優化，而非執行時機的控制

5-3 維護資料流的連動：不要欺騙 hooks 的 dependencies

5-3-1 欺騙 dependencies 會造成什麼問題

5-3-2 讓 effect 函式對於依賴的資料自給自足

5-3-3 函式型別的依賴

5-3-4 以 linter 來輔助填寫 dependencies

5-3-5 Effect dependencies 常見的錯誤用法

5-4 React 18 的 effect 函式在 mount 時為何會執行兩次？

5-4-1 React 18 的 effect 函式在 mount 時為何會執行兩次？

5-4-2 Reusable state

5-5 副作用處理的常見情境設計技巧

5-5-1 Fetch 請求伺服器端 API

5-5-2 控制外部套件

5-5-3 監聽或訂閱事件

5-5-4 不應該是副作用處理：使用者的操作所觸發的事情

5-6 useCallback 與 useMemo 的正確使用時機

5-6-1 useCallback 深入解析

5-6-2 useMemo 深入解析

5-7 Hooks 的運作原理與設計思維

5-7-1 Hooks 的資料本體到底存放在何處

5-7-2 為什麼 hooks 的運作是依賴於固定的呼叫順序

5-7-3 Hooks 的誕生是為了解決什麼問題

5-7-4 Hooks API 的設計思維與脈絡



?