購買商店

深入理解 React Router：從原理到實踐

$534.00

內容描述

本書從基礎內容出發，詳細梳理了瀏覽器的基礎導航能力、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章導航相關前驅知識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