商品編號:DJAA2V-A900H8IF8
React 思維進化:一次打破常見的觀念誤解,躍升專業前端開發者(iThome鐵人賽系列書)
驚喜優惠
$593
$750
- P幣
全盈+PAY單筆消費滿1200回饋80P幣(每帳號限乙次,限量5000名)
- 登記送
【OK】單筆滿$1純取貨/取貨付款訂單登記送OK購物金50元(限量)
- 登記送
【7-11】單筆滿$350純取貨/取貨付款訂單登記送一顆檸檬青茶兌換券乙張(限量)
付款方式
- 信用卡、無卡分期、行動支付,與其他多種方式
- PChome 聯名卡最高6%,新戶再享首刷禮1000P
出貨
- PChome 倉庫出貨,24小時到貨
配送
宅配滿$490免運,超取滿$350免運
- 宅配到府(本島/低溫)滿$699免運
- 宅配到府(本島/常溫)滿$490免運
- 超商取貨(常溫)滿$350免運
- 超商取貨(低溫)滿$699免運
- i郵箱(常溫)滿$290免運
銀行卡、行動支付
優惠總覽
商品評價
商品詳情
內文簡介
- <內容簡介>
佳評如潮!熱銷再版(平裝版)
★☆★ 銷售排行榜冠軍 TOP 1 ★☆★
思想、脈絡與觀念理解是真正的專業技術門檻,
也是鑑別出實力強大或平庸工程師的關鍵區別之一。
本書內容改編自第 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 前端效能優化大補帖》作者
★目錄:
| 第一篇 暖身準備 |
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 的設計思維與脈絡
<作者簡介>
周昱安(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 常見的學習門檻與觀念誤解》
相關分類
購物須知
寄送時間 | 全台灣24h到貨,遲到提供100元現金積點。全年無休,週末假日照常出貨。例外說明 |
---|---|
送貨方式 | 透過宅配送達。除網頁另有特別標示外,均為常溫配送。 消費者訂購之商品若經配送兩次無法送達,再經本公司以電話與Email均無法聯繫逾三天者,本公司將取消該筆訂單,並且全額退款。 |
送貨範圍 | 限台灣本島與離島地區註,部分離島地區包括連江馬祖、綠島、蘭嶼、琉球鄉…等貨件,將送至到岸船公司碼頭,需請收貨人自行至碼頭取貨。注意!收件地址請勿為郵政信箱。 註:離島地區不配送安裝商品、手機門號商品、超大材商品及四機商品。 |
售後服務 | 缺掉頁更換新品 |
執照證號&登錄字號 | 本公司食品業者登錄字號A-116606102-00000-0 |
關於退貨
- PChome24h購物的消費者,都可以依照消費者保護法的規定,享有商品貨到次日起七天猶豫期的權益。(請留意猶豫期非試用期!!)您所退回的商品必須回復原狀(復原至商品到貨時的原始狀態並且保持完整包裝,包括商品本體、配件、贈品、保證書、原廠包裝及所有附隨文件或資料的完整性)。商品一經拆封/啟用保固,將使商品價值減損,您理解本公司將依法收取回復原狀必要之費用(若無法復原,費用將以商品價值損失計算),請先確認商品正確、外觀可接受再行使用,以免影響您的權利,祝您購物順心。
- 如果您所購買商品是下列特殊商品,請留意下述退貨注意事項:
- 易於腐敗之商品、保存期限較短之商品、客製化商品、報紙、期刊、雜誌,依據消費者保護法之規定,於收受商品後將無法享有七天猶豫期之權益且不得辦理退貨。
- 影音商品、電腦軟體或個人衛生用品等一經拆封即無法回復原狀的商品,在您還不確定是否要辦理退貨以前,請勿拆封,一經拆封則依消費者保護法之規定,無法享有七天猶豫期之權益且不得辦理退貨。
- 非以有形媒介提供之數位內容或一經提供即為完成之線上服務,一經您事先同意後始提供者,依消費者保護法之規定,您將無法享有七天猶豫期之權益且不得辦理退貨。
- 組合商品於辦理退貨時,應將組合銷售商品一同退貨,若有遺失、毀損或缺件,PChome將可能要求您依照損毀程度負擔回復原狀必要之費用。
- 若您需辦理退貨,請利用顧客中心「查訂單」或「退訂/退款查詢」的「退訂/退貨」功能填寫申請,我們將於接獲申請之次日起1個工作天內檢視您的退貨要求,檢視完畢後將以E-mail回覆通知您,並將委託本公司指定之宅配公司,在5個工作天內透過電話與您連絡前往取回退貨商品。請您保持電話暢通,並備妥原商品及所有包裝及附件,以便於交付予本公司指定之宅配公司取回(宅配公司僅負責收件,退貨商品仍由特約廠商進行驗收),宅配公司取件後會提供簽收單據給您,請注意留存。
- 退回商品時,請以本公司或特約廠商寄送商品給您時所使用的外包裝(紙箱或包裝袋),原封包裝後交付給前來取件的宅配公司;如果本公司或特約廠商寄送商品給您時所使用的外包裝(紙箱或包裝袋)已經遺失,請您在商品原廠外盒之外,再以其他適當的包裝盒進行包裝,切勿任由宅配單直接粘貼在商品原廠外盒上或書寫文字。
- 若因您要求退貨或換貨、或因本公司無法接受您全部或部分之訂單、或因契約解除或失其效力,而需為您辦理退款事宜時,您同意本公司得代您處理發票或折讓單等相關法令所要求之單據,以利本公司為您辦理退款。
- 本公司收到您所提出的申請後,若經確認無誤,將依消費者保護法之相關規定,返還您已支付之對價(含信用卡交易),退款日當天會再發送E-mail通知函給您。