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

周昱安（Zet）
熱衷於前端領域技術的前端工程師，目前在 iCHEF 擔任 Lead Front-End Engineer，參與餐飲科技相關的軟體產品開發。擁有近十年的前端開發經驗以及九年的 React 開發經驗，長期以 React 生態圈作為開發的主力技術。經常出沒於前端相關的技術社群活動，曾於 JSDC、SITCON 等大型技術研討會擔任主議程的講者，並擔任 JSDC 2019、JSDC 2020 的議程組工作人員，同時也是第 14 屆 iThome 鐵人賽 Modern Web 組的冠軍。

近年來也開始投入更多關於技術分享或 mentorship 的相關活動，例如擔任 ALPHA Camp 助教主講工作坊、參加第五屆曼陀號領航計畫擔任 Engineering 組航海士（mentor）的角色、參與社群的 React 讀書會分享經驗⋯等等。

【iThome 鐵人賽獲獎】
2022 年 Modern Web 組冠軍：《一次打破 React 常見的學習門檻與觀念誤解》

| 第一篇 暖身準備 |
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 的設計思維與脈絡