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

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


本書內容改編自第 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開發環境建置的門檻

| 第二篇 React的畫面管理機制 |
2-1 DOM與Virtual DOM
2-2 建構畫面的最小單位：React element
2-3 Render React element
2-4 JSX根本就不是在JavaScript中寫HTML
2-5 JSX的語法規則脈絡與畫面渲染的實用技巧
2-6 單向資料流與一律重繪渲染策略
2-7 畫面組裝的藍圖：component初探
2-8 React畫面更新的發動機：state初探
2-9 React畫面更新的流程機制：reconciliation

| 第三篇 State資料的管理與維護 |
3-1 如何在子component裡觸發更新父component的資料
3-2 深入理解batch update與updater function
3-3 維持React資料流可靠性的重要關鍵：immutable state
3-4 Immutable update

| 第四篇 Component的生命週期與資料流 |
4-1 Component的生命週期
4-2 Function component與class component關鍵區別
4-3 每次render都有自己的props、state與event handler函式

| 第五篇 Effect與hooks |
5-1 React中的副作用處理：effect初探
5-2 useEffect其實不是function component的生命週期API
5-3 維護資料流的連動：不要欺騙hooks的dependencies
5-4 React 18的effect函式在mount時為何會執行兩次？
5-5 副作用處理的常見情境設計技巧
5-6 useCallback與useMemo的正確使用時機
5-7 Hooks的運作原理與設計思維