滿額折
深入理解React Router：從原理到實踐（簡體書）
相關商品
商品簡介
作者簡介
目次
商品簡介
本書從基礎內容出發，詳細梳理了瀏覽器的基礎導航能力、history庫的使用及原理，以及React Hooks等基礎知識，幫助讀者學習並掌握React Router的前驅知識。同時，本書從React Router的發展歷程、技術演變出發，介紹了React Router的設計思路，並通過路由器、路由端口、導航三要素，引出React Router的基本使用方法，並對源碼進行了全面解析。此外，本書各章使用React Hooks穿插了30餘個案例，在兼顧實用性、可擴展性的同時，為讀者學習與理解React Router提供了全面豐富的素材。通過閱讀本書，讀者不僅可以融會貫通地掌握React Router，而且能提升對前端路由的認識，並掌握前端領域路由的設計思路與方法。本書適合有JavaScript或TypeScript基礎，想要學習使用React Router，或對React Router實現原理和工程實踐感興趣的開發者閱讀。
作者簡介
李楊韜，一線前端工程師，碩士畢業於東南大學，目前在美團點評工作，專注於Web開發，擁有多年工程經驗，參與過眾多大型Web項目的設計，開發，同時也喜愛探索Web前沿技術。
目次
第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
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
您曾經瀏覽過的商品
購物須知
大陸出版品因裝訂品質及貨運條件與台灣出版品落差甚大，除封面破損、內頁脫落等較嚴重的狀態，其餘商品將正常出貨。
特別提醒：部分書籍附贈之內容(如音頻mp3或影片dvd等)已無實體光碟提供，需以QR CODE 連結至當地網站註冊“並通過驗證程序”，方可下載使用。
無現貨庫存之簡體書，將向海外調貨：
海外有庫存之書籍，等候約45個工作天;
海外無庫存之書籍，平均作業時間約60個工作天，然不保證確定可調到貨，尚請見諒。
為了保護您的權益，「三民網路書店」提供會員七日商品鑑賞期(收到商品為起始日)。
若要辦理退貨，請在商品鑑賞期內寄回，且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。