2024/2 更新 - 實體書平裝版本推出

在經過快要一年的努力後，本系列文的實體書版本推出了～其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節，並以全彩印刷拉滿視覺上的閱讀體驗，現正熱銷中！有興趣的話歡迎參考看看，也歡迎分享給其他有接觸前端的朋友們，非常感謝大家～

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

首刷的軟精裝版本各大通路已經都銷售一空，接下來會再刷推出新的平裝版本：

天瓏（平裝版）：
https://www.tenlong.com.tw/products/9786263337695

博客來（平裝版）：
https://www.books.com.tw/products/0010982322

momo（平裝版）：
https://www.momoshop.com.tw/goods/GoodsDetail.jsp?i_code=12528845

大家好，我是 Zet，目前是 iCHEF 的 Lead Front-End Engineer。我的 React 的開發經驗約有九年多，從大概 2014 年年底（那時候還是個資工系大學生）就開始接觸 React，而學習經驗是以自學加上參與技術社群為主，也曾在蠻多技術社群的小聚或是大型研討會擔任過議程講者以及工作人員。

從還只是個大學生兼 React 初學者，到能夠在技術社群進行分享，再到正式踏入前端工程師的職場並成長到 senior，甚至擔任許多夥伴的 mentor，我發現這麼多年來有一件事情始終沒有太大的改變，就是關於「大家普遍覺得 React 學習門檻很高，也很難學的好」這一點。

以我自己長年接觸 React 生態圈，以及擔任 mentor、前端面試官的經驗來看，我認為既同意，但也不同意，怎麼說呢？

先說說不同意的部分。React 比起其他主流的前端框架 / 解決方案（如 Vue、Angular）來說，其實是更純粹的 JavaScript 開發體驗。比起各種特殊的 template language、directive、依賴注入…等等需要完全重新學習的自定義技術或語法，React 完全沒有這些 JS 以外的東西是必須額外學習的（即使是 JSX 語法也只是一種很有限的語法糖，而非一種 JavaScript 以外的技術）。在 React 中幾乎全部的機制都是完全依賴 JavaScript 內建的特性，沒有任何不透明的魔法或特規的指令語法，因此在基礎語法或 API 的掌握方面的學習成本是相對較低的。

而同意的部分則是分成兩個面向，第一個面向其實就正好是上面講的不同意的部分：由於 React 有大量機制或撰寫習慣是依賴 JavaScript 本身的核心特性，所以 JavaScript 基礎不穩的人在學習 React 時通常會非常辛苦，甚至分辨不出來某些寫法或行為是 JavaScript 本身的特性導致的，還是 React 獨有的特性導致的。因此，我會建議將 JavaScript 的基本功打好打穩之後再開始進行 React 的學習，可能會是比較順暢的學習路徑。

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

相反的，當你真的掌握在這些設計背後的思想之後，你反而會覺得 React 的所有設計都非常直覺甚至是一脈相承。這是因為 React 當中的概念或機制大多都環環相扣，當你從一開始就對核心概念一知半解甚至理解錯誤，則後續延伸的進階概念認知都會基於這個錯誤的理解之上越走越偏。反之，當你對於核心思想與概念真正內化到你的開發思維時，你會有一種任督二脈被打通的感覺，覺得那些原本看似莫名其妙的設計一切都說得通了，everything connected。

而這些觀念通常並不會因為你寫的 React 專案或程式碼越多就突然自己憑空開竅，而是需要額外投入大量的功夫，好好的從設計思想與概念本身理解，然後帶著這些理解與思維融合進實作，才會是有意義的累積並融會貫通，最後內化進你的思考模型當中。

其實有很多人在學習、嘗試掌握 React 時碰到瓶頸並難以突破，大多都是因為以上的原因。而無論是 JavaScript 的基本功，又或是 React 的核心觀念，這些東西都是一旦在學習的前期沒有好好理解並內化到思考模型中的話，後續較進階的技術學習就會帶著錯誤的理解去堆疊上更錯誤的理解，或是以一知半解的觀念寫出看似能動但其實有問題的程式碼，進而離真正掌握這門技術越來越遠。

因此這個系列文正是希望將這些 React 的學習門檻、核心觀念、設計思維進行一個盤點並深入解析，希望能對於正在學習 React 或是已經有 React 的經驗但是苦惱於難以進一步掌握的朋友們有所幫助。

誰適合閱讀此系列文

這個系列文並不是一個 React 的新手教學或手把手的課程，因此不會把所有的 React API 都一一介紹一遍有什麼參數要怎麼調用，也不會有大量的專案範例帶著大家實作練習怎麼寫，而是針對其核心思想與最容易被誤解的觀念做透徹的解析，希望能夠幫助大家一次打破 React 的學習門檻與觀念誤解：

• 適合已經正在學習 React 中的人
• 適合對 React 有一定的認識或實作經驗，但對於核心觀念與原理還沒深度掌握的人（應該有蠻多人是處於這個階段）
• 如果你是一個 React 的完全新手，單獨只看本系列文並不能讓你完整學會 React 怎麼寫，建議可以搭配其它的 React 新手課程或教學一起服用，方能達到最佳效果

React 版本提醒

需要特別注意的是，本系列文會以目前最新的 React 18 作為基準，並以目前已經是主流的 function component & hooks 為主來深入解析。