React 思維進化：一次打破常見的觀念誤解，躍升專業前端開發者

思想、脈絡與觀念理解是真正的專業技術門檻，
也是鑑別出實力強大或平庸工程師的關鍵區別之一。

本書內容改編自第 14 屆 iThome 鐵人賽 Modern Web 組的冠軍系列文章《一次打破 React 常見的學習門檻與觀念誤解》。本書以循序漸進的脈絡帶讀者從頭理解 React 技術的核心觀念、運作原理與設計思維。

React 本身的設計基於了許多程式領域的設計模式，而這些設計模式的概念大多都與「還沒有使用前端框架時的程式運作思維與習慣」相去甚遠。因此當你沒有真正理解這些設計模式時，你會覺得 React 的許多設計與行為都很不直覺甚至莫名其妙。並且，如果你不熟悉這些觀念或原理的話，則非常容易在實際開發時寫出有問題但卻不自知的程式碼，為專案的程式碼品質和軟體產品的可靠性埋下巨大的隱患。

有別於市面上充斥的各種「教你如何呼叫語法」以及「帶你實戰範例」的 React 學習資源，本書會著重於技術理解的基本功累積，讓你對於 React 的觀念不再一知半解，以避免「跟著寫了很多 React 範例練習卻還是不懂這些程式碼是如何運作的，無法真正掌握這門技術」這種常見的學習瓶頸，帶你朝向真正的專業 React 開發者邁出紮實且關鍵的一大步。

目標讀者
本書並不是一本關於如何開發 React 專案的手把手實戰教學手冊。相較於大量的案例實作練習，本書會更聚焦於 React 的核心設計思維以及最常被誤解的觀念進行透徹的解析，希望能夠幫助大家一次打破 React 的學習門檻與觀念誤解，成為真正的專業 React 開發者。這本書適合所有「希望將 React 作為專業技術能力」的人學習：

❏ 適合有 JavaScript 的基礎，但對 React是完全新手的人。你可以透過本書從零建立相當穩固的 React 核心觀念理解與思維的基本功，對於後續繼續學習其他實戰類型的學習資源也能有更好的基礎進行銜接。

❏ 也適合已經在學習 React 中的人。這本書將可以讓你對於許多觀念的理解茅塞頓開，學習成效事半功倍。

❏ 也適合對 React 有一定程度的認識或實作經驗，但對於核心觀念與原理還沒深度掌握的人（應該有蠻多人是處於這個階段）。這本書會是你突破瓶頸、邁向資深 React 開發者的關鍵助力。

專業推薦

「這本書使 React 初學者能夠打破「只會跟著寫範例但不理解背後原理」的惡性循環，進而成為真正的專業 React 開發者。我強烈推薦這本書給所有希望在未來軟體開發市場中保持競爭力的前端開發者。」——Richard Lee │ 愛料理共同創辦人＆技術長，Google Developer Expert - Firebase

「它適合那些在調試 React 應用時遇到困難，或者對 React 的運作原理、組件和 Hooks 的封裝不太明白的開發者。對於那些渴望將自己的技能提升到更高層次的人來說，這絕對是一本必讀書籍。」——Caesar Chi 戚務漢 │ JavaScript Developer Conference Taiwan 主辦群

「透過這本書，你會發現 React 不只是一個工具，它更是一門程式藝術，值得我們去探索、去體會。這本書將伴隨你在 React 的旅途中，一步步成長為更優秀的開發者。」——莫力全 Kyle Mo │ Full Stack Web Engineer @Netskope，《今晚來點 Web 前端效能優化大補帖》作者

周昱安（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 的設計思維與脈絡