深入理解React Router：從原理到實踐 ( 簡體 字) |
| 作者：李楊韜 | 類別：1. -> 程式設計 -> 綜合 |
| 譯者： |
| 出版社：電子工業出版社 |  3dWoo書號： 54206
詢問書籍請說出此書號！【缺書】
NT售價： 445 元 |
| 出版日：3/1/2021 |
| 頁數：356 |
| 光碟數：0 |
|
站長推薦：   |
| 印刷：黑白印刷 | 語系： ( 簡體 版 ) |
| |
加入購物車  │加到我的最愛
(請先登入會員) |
| ISBN：9787121406089 |
| 作者序 | 譯者序 | 前言 | 內容簡介 | 目錄 | 序 |
| (簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證) |
| 作者序： |
| 譯者序： |
前言：在我剛進入前端開發行業的時候，業界普遍采用多頁面應用的模式，前端頁面依附于服務端應用平臺并作為展示模板，由服務端響應頁面間的跳轉請求。隨著前端技術的飛速發展，AJAX逐漸成為流行的前后端通信技術，使得頁面不再需要在頁面加載或表單提交時同步地向服務端提交或獲取數據，而是異步地向服務端提交或獲取數據。從此，前后端分離時代來臨。
前后端分離時代的來臨，使得前后端分工逐漸趨于獨立，前端頁面不再依附于服務端，頁面直接部署于CDN中。頁面元素通過組件搭建而成，并直接在前端進行狀態管理。原有的多頁面應用也將頁面視為組件，開始出現單頁面應用（Single Page Application，SPA）。
優秀的單頁面應用為用戶提供了近似本地軟件的體驗，早期最有名的便是Gmail。Gmail率先為業界展示了單頁面應用的魅力，用戶在使用Gmail時，與使用本地郵件客戶端并無差別，用戶無須等待頁面刷新。
單頁面應用要實現加載后無刷新的體驗，除了需要采用AJAX來代替表單提交，還離不開前端路由器。在瀏覽器環境當中，用戶會對頁面進行后退、前進、保存書簽、分享URL等操作，這些操作原本是瀏覽器向服務端發送請求，由服務端路由進行響應支持的。而在前后端分離、單頁面的架構下，對用戶此類行為的處理自然需要交到前端，于是業界很快開始抽象出前端路由。
React作為當前業界流行的三大前端UI框架之一，其配套的前端路由React Router使用率也極高。截至2019年年末，react-router包每周下載量超過250萬次。前端工程師很有必要了解路由的使用方式和運作原理，如果使用的是React，則很有必要了解React Router。
本書詳細地介紹了React Router的歷史演變、使用方式及運作原理。
在使用方式上，書中提供了基礎場景的示例，讀者可以學到React Router的使用方式。在后面的進階實戰示例章節中，讀者也可以學到在工程實踐中如何運用前端路由。全書還包括對React當前最新的React Hooks API的講解。
在運作原理相關的章節中，從最基礎的URL、瀏覽器history API，到React Router的源碼實現，都有詳細的講解，這對希望了解前端路由實現原理的工程師來說會有不少的幫助。
本書基本囊括了所有與React Router相關的技術知識和細節，推薦想深入了解現代前端路由的工程師閱讀。
葉俊星（Jasin Yip）
全棧工程師，先后就職于美團網、阿里巴巴
React Router自2014年2月發布第一個版本，到2019年10月發布v5.1.2，已經經歷了大大小小130多個版本的迭代演進。從2020年1月的GitHub數據來看，有超過80萬個倉庫的依賴包含了React Router，同時NPM上依賴React Router的react-router包數量已超過5200個。2019年，在NPM源中，React Router的react-router包周平均下載量超過250萬次。以上數據足以說明，React Router幾乎成了React生態中路由的標準解決方案。
鑒于目前相關系統介紹React Router的技術圖書比較匱乏，特編寫此書以饗讀者。本書基于React開發框架，在提供基礎知識的同時，將基于React Router v5.1.2進行介紹。以下是各章節內容。
第1章，主要介紹與導航相關的JavaScript前驅知識，為路由框架學習提供基礎知識儲備。
第2章，講解history庫的基礎知識及原理，并介紹與history庫相關的限制及注意事項，幫助讀者學習導航基礎。
第3章，介紹React v16.3及之后版本的一些新特性，包括Context、Hooks等，旨在幫助讀者學習與理解Router設計中的相關知識。
第4章，首先對React Router進行基本的介紹，并對React Router的發展歷程進行梳理，分析React Router的版本演進過程，使讀者對React Router有一個全方位的了解。之后，從一個簡單的工程實例出發，使讀者了解React Router的簡單使用方法，并引出React Router三要素，為后面章節做好鋪墊。
第 5 章，全面介紹路由系統的第一個基本要素——Router。在對不同種類的Router進行介紹的同時，通過源碼介紹Router的基本原理，并介紹Router相關的Hooks。學完本章，將為理解整個路由系統的原理打好重要的基礎。
第6章，介紹路由系統的第二個要素——Route。首先介紹Route中的兩個基本元素：路徑與渲染，并介紹Route為組件提供的屬性與Route的相關配置。在通過Route源碼鞏固后，通過相關Hooks與多個實戰案例，為讀者提供豐富的實戰經驗總結。
第 7 章，介紹路由系統中的導航，包括基本導航組件、帶激活態的導航組件等。在介紹基礎使用方法的同時，也對源碼實現進行分析，幫助讀者深入了解導航組件的設計，并通過實戰案例強化讀者對導航的理解。
第 8 章，介紹幫助組件及方法，恰當地使用相關組件或方法，可以提升開發效率。本章在介紹各組件與方法的基礎用法時，也穿插了各組件的源碼解析，并通過實戰案例，幫助讀者深入學習和掌握各組件的設計思路及實際用法，提升讀者在實戰中的開發效率。
第 9 章，在學好以上各章知識的基礎上，讀者能清晰地看到路由系統的全貌，且對React Router有全面的掌握。以此為基礎，本章提供多個進階案例，更為讀者提供組件設計的思路和方法。通過本章系統性的學習，讀者可全方位地學習與理解前端路由，并提升對前端路由的整體認識，掌握前端領域路由的設計思路與方法。
本書既能幫助初學者快速上手，又能幫助有一定基礎的開發者深入理解React Router的設計實現，從而加深對路由系統的理解。讀完本書，讀者不僅能清楚各場景是怎么使用React Router的，更能深入理解React Router的設計原理，對React Router做出定制化的改造，以面對日漸復雜的頁面結構與需求。
閱讀本書需要有一定的React、TypeScript或JavaScript基礎。本書適合有JavaScript或TypeScript基礎，想要學習使用React Router，或對React Router實現原理和工程實踐感興趣的開發者閱讀。
示例代碼：
讀者可以從GitHub上獲取本書的源碼。
本書的完成離不開在各個方面給予我支持和幫助的人，感謝我的同事曾靜益、李宏，他們給本書提出了很多寶貴的意見；感謝電子工業出版社博文視點的編輯宋亞東，他在編輯和審校本書期間提出了寶貴的意見；最后，感謝我的家人、朋友、同學在我創作本書期間給予的寬容和支持。
如果您在閱讀本書的過程中有任何問題，可以發送郵件到作者的郵箱反饋。由于作者水平有限，不足之處在所難免，請廣大讀者批評指正。
李楊韜 |
內容簡介：本書從基礎內容出發，詳細梳理了瀏覽器的基礎導航能力、history庫的使用及原理，以及React Hooks等基礎知識，幫助讀者學習并掌握React Router的前驅知識。同時，本書從React Router的發展歷程、技術演變出發，介紹了React Router的設計思路，并通過路由器、路由端口、導航三要素，引出React Router的基本使用方法，并對源碼進行了全面解析。此外，本書各章使用React Hooks穿插了30余個案例，在兼顧實用性、可擴展性的同時，為讀者學習與理解React Router提供了全面豐富的素材。通過閱讀本書，讀者不僅可以融會貫通地掌握React Router，而且能提升對前端路由的認識，并掌握前端領域路由的設計思路與方法。本書適合有JavaScript或TypeScript基礎，想要學習使用React Router，或對React Router實現原理和工程實踐感興趣的開發者閱讀。 |
目錄：第1章 導航相關JavaScript前驅知識 1
1.1 URI和URL 1
1.1.1 URI和URL簡介 1
1.1.2 瀏覽器URI編碼 3
1.2 瀏覽器記錄 4
1.2.1 history.pushState 5
1.2.2 history.replaceState 9
1.2.3 通過相對路徑添加和修改瀏覽器記錄 11
1.2.4 在base元素存在的情況下添加和修改瀏覽器記錄 14
1.3 在瀏覽器中跳轉 15
1.3.1 window.history.go 15
1.3.2 window.history.forward 16
1.3.3 window.history.back 16
1.3.4 window.location.href 17
1.3.5 window.location.hash 17
1.3.6 window.location.replace 18
1.4 瀏覽器相關事件介紹 19
1.4.1 popstate事件 19
1.4.2 hashchange事件 21
1.4.3 手動觸發事件 22
1.5 小結 24
參考文獻 24
第2章 history庫詳解 26
2.1 history庫概述 26
2.2 browserHistory 32
2.2.1 創建browserHistory 32
2.2.2 history導航 33
2.2.3 history監聽 37
2.3 hashHisotry 38
2.3.1 創建hashHisotry 38
2.3.2 history導航 40
2.3.3 history監聽 45
2.3.4 history.createHref 47
2.4 memoryHistory 49
2.4.1 創建memoryHistory 49
2.4.2 history導航 50
2.4.3 history監聽 53
2.5 history庫原理 54
2.5.1 history庫的運行流程 54
2.5.2 history模擬歷史棧 55
2.5.3 browserHistory事件處理 57
2.5.4 hashHistory事件處理 58
2.5.5 history.block原理解析 60
2.6 history庫限制 63
2.6.1 history.block的使用限制 63
2.6.2 decodeURI解碼問題 64
2.7 使用history替換頁面search和hash示例 70
2.8 小結 71
參考文獻 71
第3章 React相關知識 72
3.1 Context 72
3.2 Hooks 76
3.2.1 useState 76
3.2.2 useEffect 78
3.2.3 useLayoutEffect 84
3.2.4 useRef 86
3.2.5 useMemo 87
3.2.6 useContext 89
3.2.7 自定義Hook 89
3.3 Refs 90
3.3.1 createRef 90
3.3.2 forwardRef 91
3.4 Memo 91
3.5 小結 94
參考文獻 94
第4章 認識React Router 95
4.1 React Router是什么 95
4.2 React Router版本的演進 96
4.3 靜態路由與動態路由 97
4.4 使用React Router實現一個工程應用 98
4.5 小結 107
第5章 Router 109
5.1 Router是什么 109
5.2 Router源碼解析 110
5.2.1 history監聽 110
5.2.2 提供初始Context 110
5.2.3 提前監聽 113
5.3 BrowserRouter 113
5.4 HashRouter 114
5.5 NativeRouter 115
5.6 StaticRouter 116
5.7 相關Hooks 121
5.7.1 useRouterContext 122
5.7.2 useHistory 122
5.7.3 useLocation 123
5.8 小結 124
參考文獻 124
第6章 Route 125
6.1 Route是什么 125
6.2 Route的兩個基本要素 125
6.2.1 Route的第一個要素：path 126
6.2.2 Route的第二個要素：組件渲染方式 134
6.3 Route傳入組件的3個參數 138
6.3.1 match 138
6.3.2 location 140
6.3.3 history 141
6.4 Route的其他配置 142
6.4.1 location 142
6.4.2 exact 142
6.4.3 strict 143
6.4.4 sensitive 144
6.5 Route 源碼解析 144
6.5.1 上下文的更新 144
6.5.2 運行流程 147
6.6 相關Hooks 149
6.6.1 useRouteMatch 149
6.6.2 useParams 149
6.7 Route實戰案例 150
6.7.1 嵌套Route 150
6.7.2 相對路徑Route 152
6.7.3 重定向Route 153
6.7.4 默認子組件Route 156
6.7.5 緩存Route 158
6.7.6 Route渲染組件的可訪問性支持 165
6.7.7 query及命名參數 166
6.7.8 Route中的代碼拆分 168
6.8 小結 169
參考文獻 170
第7章 Link 171
7.1 Link介紹 171
7.1.1 Link的定義及屬性 171
7.1.2 Link源碼解析 174
7.2 NavLink 176
7.2.1 帶激活態的Link 176
7.2.2 轉義特殊字符 178
7.2.3 NavLink源碼解析 178
7.3 DeepLinking 181
7.4 BackButton 182
7.5 導航實戰案例 183
7.5.1 為導航組件擴展路由匹配 183
7.5.2 相對上下文路徑導航組件 184
7.5.3 相對上下文路徑的導航方法 185
7.5.4 為導航組件擴展search和hash支持 188
7.6 小結 191
參考文獻 191
第8章 其他路由組件及方法 192
8.1 Switch 192
8.1.1 Switch簡介 192
8.1.2 Switch源碼解析 194
8.2 Redirect 196
8.2.1 基本跳轉 196
8.2.2 條件跳轉 197
8.2.3 源碼解析 198
8.3 Prompt 201
8.4 withRouter 203
8.5 matchPath 205
8.6 實戰案例 206
8.6.1 路由動畫 206
8.6.2 Prompt組件 210
8.6.3 404頁面 212
8.6.4 不銷毀未命中路徑組件的擴展Switch 215
8.7 小結 218
參考文獻 219
第9章 進階實戰案例 220
9.1 路由組件的滾動恢復 220
9.1.1 scrollRestoration 220
9.1.2 容器元素滾動恢復 221
9.1.3 滾動管理者ScrollManager 221
9.1.4 滾動恢復執行者ScrollElement 224
9.1.5 多次嘗試機制 227
9.2 異步history方法 229
9.2.1 提升history方法 229
9.2.2 導航感知 231
9.3 為路由引入hash定位 233
9.3.1 頁面加載 233
9.3.2 異步數據加載 235
9.4 為組件引入路由生命周期 237
9.4.1 路由生命周期 237
9.4.2 實現路由生命周期高階組件 241
9.5 React Router狀態同步Redux 246
9.5.1 接入connected-react-router 246
9.5.2 connected-react-router原理分析 249
9.6 React Router狀態同步Mobx 251
9.7 路由與組件的結合實戰 252
9.7.1 路由結合Tabs組件 252
9.7.2 路由結合Modal組件 256
9.7.3 路由結合BreadCrumb組件 257
9.8 為history方法引入前置中間件 260
9.8.1 Redux中間件 260
9.8.2 中間件定義 261
9.8.3 實現history中間件 263
9.9 組件路由化 268
9.9.1 為組件加入path屬性 268
9.9.2 為組件賦予路由 269
9.10 路由與頁簽機制 274
9.10.1 頁簽介紹 274
9.10.2 頁簽配置 276
9.10.3 頁簽實現 277
9.11 在React Hooks中使用路由 282
9.11.1 通過React Hooks獲得路由組件 282
9.11.2 實現useHookRoutes 284
9.12 微服務路由 286
9.12.1 微服務介紹 286
9.12.2 實現示例 287
9.13 配置化路由擴展 294
9.13.1 配置化路由與react-router-config 294
9.13.2 重新實現配置化路由 298
9.14 配置化路由綜合示例 303
9.14.1 路由配置 304
9.14.2 導航 310
9.14.3 使用頁簽組件 318
9.14.4 頁簽棧維護 325
9.15 小結 335
參考文獻 336
附錄A 從React Router v3.x遷移到React Router v4.x及以上版本 337 |
| 序： |
