深入理解React Router：從原理到實(shí)踐

定　價(jià)：￥89.00

作　者：	李楊韜著
出版社：	電子工業(yè)出版社
叢編項(xiàng)：
標(biāo)　簽：	暫缺

購(gòu)買這本書(shū)可以去

ISBN：	9787121406089	出版時(shí)間：	2021-03-01	包裝：	平裝
開(kāi)本：	16開(kāi)	頁(yè)數(shù)：	356	字?jǐn)?shù)：

內(nèi)容簡(jiǎn)介

　　本書(shū)從基礎(chǔ)內(nèi)容出發(fā)，詳細(xì)梳理了瀏覽器的基礎(chǔ)導(dǎo)航能力、history庫(kù)的使用及原理，以及React Hooks等基礎(chǔ)知識(shí)，幫助讀者學(xué)習(xí)并掌握React Router的前驅(qū)知識(shí)。同時(shí)，本書(shū)從React Router的發(fā)展歷程、技術(shù)演變出發(fā)，介紹了React Router的設(shè)計(jì)思路，并通過(guò)路由器、路由端口、導(dǎo)航三要素，引出React Router的基本使用方法，并對(duì)源碼進(jìn)行了全面解析。此外，本書(shū)各章使用React Hooks穿插了30余個(gè)案例，在兼顧實(shí)用性、可擴(kuò)展性的同時(shí)，為讀者學(xué)習(xí)與理解React Router提供了全面豐富的素材。通過(guò)閱讀本書(shū)，讀者不僅可以融會(huì)貫通地掌握React Router，而且能提升對(duì)前端路由的認(rèn)識(shí)，并掌握前端領(lǐng)域路由的設(shè)計(jì)思路與方法。本書(shū)適合有JavaScript或TypeScript基礎(chǔ)，想要學(xué)習(xí)使用React Router，或?qū)eact Router實(shí)現(xiàn)原理和工程實(shí)踐感興趣的開(kāi)發(fā)者閱讀。

作者簡(jiǎn)介

　　李楊韜，一線前端工程師，碩士畢業(yè)于東南大學(xué)，目前在美團(tuán)點(diǎn)評(píng)工作，專注于Web開(kāi)發(fā)，擁有多年工程經(jīng)驗(yàn)，參與過(guò)眾多大型Web項(xiàng)目的設(shè)計(jì)，開(kāi)發(fā)，同時(shí)也喜愛(ài)探索Web前沿技術(shù)。

圖書(shū)目錄

第1章導(dǎo)航相關(guān)JavaScript前驅(qū)知識(shí)\t1
1．1 URI和URL\t1
1．1．1 URI和URL簡(jiǎn)介\t1
1．1．2 瀏覽器URI編碼\t3
1．2 瀏覽器記錄\t4
1．2．1 history．pushState\t5
1．2．2 history．replaceState\t9
1．2．3 通過(guò)相對(duì)路徑添加和修改瀏覽器記錄\t11
1．2．4 在base元素存在的情況下添加和修改瀏覽器記錄\t14
1．3 在瀏覽器中跳轉(zhuǎn)\t15
1．3．1 window．history．go\t15
1．3．2 window．history．forward\t16
1．3．3 window．history．back\t16
1．3．4 window．location．href\t17
1．3．5 window．location．hash\t17
1．3．6 window．location．replace\t18
1．4 瀏覽器相關(guān)事件介紹\t19
1．4．1 popstate事件\t19
1．4．2 hashchange事件\t21
1．4．3 手動(dòng)觸發(fā)事件\t22
1．5 小結(jié)\t24
參考文獻(xiàn)\t24
第2章 history庫(kù)詳解\t26
2．1 history庫(kù)概述\t26
2．2 browserHistory\t32
2．2．1 創(chuàng)建browserHistory\t32
2．2．2 history導(dǎo)航\t33
2．2．3 history監(jiān)聽(tīng)\t37
2．3 hashHisotry\t38
2．3．1 創(chuàng)建hashHisotry\t38
2．3．2 history導(dǎo)航\t40
2．3．3 history監(jiān)聽(tīng)\t45
2．3．4 history．createHref\t47
2．4 memoryHistory\t49
2．4．1 創(chuàng)建memoryHistory\t49
2．4．2 history導(dǎo)航\t50
2．4．3 history監(jiān)聽(tīng)\t53
2．5 history庫(kù)原理\t54
2．5．1 history庫(kù)的運(yùn)行流程\t54
2．5．2 history模擬歷史棧\t55
2．5．3 browserHistory事件處理\t57
2．5．4 hashHistory事件處理\t58
2．5．5 history．block原理解析\t60
2．6 history庫(kù)限制\t63
2．6．1 history．block的使用限制\t63
2．6．2 decodeURI解碼問(wèn)題\t64
2．7 使用history替換頁(yè)面search和hash示例\t70
2．8 小結(jié)\t71
參考文獻(xiàn)\t71
第3章 React相關(guān)知識(shí)\t72
3．1 Context\t72
3．2 Hooks\t76
3．2．1 useState\t76
3．2．2 useEffect\t78
3．2．3 useLayoutEffect\t84
3．2．4 useRef\t86
3．2．5 useMemo\t87
3．2．6 useContext\t89
3．2．7 自定義Hook\t89
3．3 Refs\t90
3．3．1 createRef\t90
3．3．2 forwardRef\t91
3．4 Memo\t91
3．5 小結(jié)\t94
參考文獻(xiàn)\t94
第4章認(rèn)識(shí)React Router\t95
4．1 React Router是什么\t95
4．2 React Router版本的演進(jìn)\t96
4．3 靜態(tài)路由與動(dòng)態(tài)路由\t97
4．4 使用React Router實(shí)現(xiàn)一個(gè)工程應(yīng)用\t98
4．5 小結(jié)\t107
第5章 Router\t109
5．1 Router是什么\t109
5．2 Router源碼解析\t110
5．2．1 history監(jiān)聽(tīng)\t110
5．2．2 提供初始Context\t110
5．2．3 提前監(jiān)聽(tīng)\t113
5．3 BrowserRouter\t113
5．4 HashRouter\t114
5．5 NativeRouter\t115
5．6 StaticRouter\t116
5．7 相關(guān)Hooks\t121
5．7．1 useRouterContext\t122
5．7．2 useHistory\t122
5．7．3 useLocation\t123
5．8 小結(jié)\t124
參考文獻(xiàn)\t124
第6章 Route\t125
6．1 Route是什么\t125
6．2 Route的兩個(gè)基本要素\t125
6．2．1 Route的第一個(gè)要素：path\t126
6．2．2 Route的第二個(gè)要素：組件渲染方式\t134
6．3 Route傳入組件的3個(gè)參數(shù)\t138
6．3．1 match\t138
6．3．2 location\t140
6．3．3 history\t141
6．4 Route的其他配置\t142
6．4．1 location\t142
6．4．2 exact\t142
6．4．3 strict\t143
6．4．4 sensitive\t144
6．5 Route 源碼解析\t144
6．5．1 上下文的更新\t144
6．5．2 運(yùn)行流程\t147
6．6 相關(guān)Hooks\t149
6．6．1 useRouteMatch\t149
6．6．2 useParams\t149
6．7 Route實(shí)戰(zhàn)案例\t150
6．7．1 嵌套R(shí)oute\t150
6．7．2 相對(duì)路徑Route\t152
6．7．3 重定向Route\t153
6．7．4 默認(rèn)子組件Route\t156
6．7．5 緩存Route\t158
6．7．6 Route渲染組件的可訪問(wèn)性支持\t165
6．7．7 query及命名參數(shù)\t166
6．7．8 Route中的代碼拆分\t168
6．8 小結(jié)\t169
參考文獻(xiàn)\t170
第7章 Link\t171
7．1 Link介紹\t171
7．1．1 Link的定義及屬性\t171
7．1．2 Link源碼解析\t174
7．2 NavLink\t176
7．2．1 帶激活態(tài)的Link\t176
7．2．2 轉(zhuǎn)義特殊字符\t178
7．2．3 NavLink源碼解析\t178
7．3 DeepLinking\t181
7．4 BackButton\t182
7．5 導(dǎo)航實(shí)戰(zhàn)案例\t183
7．5．1 為導(dǎo)航組件擴(kuò)展路由匹配\t183
7．5．2 相對(duì)上下文路徑導(dǎo)航組件\t184
7．5．3 相對(duì)上下文路徑的導(dǎo)航方法\t185
7．5．4 為導(dǎo)航組件擴(kuò)展search和hash支持\t188
7．6 小結(jié)\t191
參考文獻(xiàn)\t191
第8章其他路由組件及方法\t192
8．1 Switch\t192
8．1．1 Switch簡(jiǎn)介\t192
8．1．2 Switch源碼解析\t194
8．2 Redirect\t196
8．2．1 基本跳轉(zhuǎn)\t196
8．2．2 條件跳轉(zhuǎn)\t197
8．2．3 源碼解析\t198
8．3 Prompt\t201
8．4 withRouter\t203
8．5 matchPath\t205
8．6 實(shí)戰(zhàn)案例\t206
8．6．1 路由動(dòng)畫(huà)\t206
8．6．2 Prompt組件\t210
8．6．3 404頁(yè)面\t212
8．6．4 不銷毀未命中路徑組件的擴(kuò)展Switch\t215
8．7 小結(jié)\t218
參考文獻(xiàn)\t219
第9章進(jìn)階實(shí)戰(zhàn)案例\t220
9．1 路由組件的滾動(dòng)恢復(fù)\t220
9．1．1 scrollRestoration\t220
9．1．2 容器元素滾動(dòng)恢復(fù)\t221
9．1．3 滾動(dòng)管理者ScrollManager\t221
9．1．4 滾動(dòng)恢復(fù)執(zhí)行者ScrollElement\t224
9．1．5 多次嘗試機(jī)制\t227
9．2 異步history方法\t229
9．2．1 提升history方法\t229
9．2．2 導(dǎo)航感知\t231
9．3 為路由引入hash定位\t233
9．3．1 頁(yè)面加載\t233
9．3．2 異步數(shù)據(jù)加載\t235
9．4 為組件引入路由生命周期\t237
9．4．1 路由生命周期\t237
9．4．2 實(shí)現(xiàn)路由生命周期高階組件\t241
9．5 React Router狀態(tài)同步Redux\t246
9．5．1 接入connected-react-router\t246
9．5．2 connected-react-router原理分析\t249
9．6 React Router狀態(tài)同步Mobx\t251
9．7 路由與組件的結(jié)合實(shí)戰(zhàn)\t252
9．7．1 路由結(jié)合Tabs組件\t252
9．7．2 路由結(jié)合Modal組件\t256
9．7．3 路由結(jié)合BreadCrumb組件\t257
9．8 為history方法引入前置中間件\t260
9．8．1 Redux中間件\t260
9．8．2 中間件定義\t261
9．8．3 實(shí)現(xiàn)history中間件\t263
9．9 組件路由化\t268
9．9．1 為組件加入path屬性\t268
9．9．2 為組件賦予路由\t269
9．10 路由與頁(yè)簽機(jī)制\t274
9．10．1 頁(yè)簽介紹\t274
9．10．2 頁(yè)簽配置\t276
9．10．3 頁(yè)簽實(shí)現(xiàn)\t277
9．11 在React Hooks中使用路由\t282
9．11．1 通過(guò)React Hooks獲得路由組件\t282
9．11．2 實(shí)現(xiàn)useHookRoutes\t284
9．12 微服務(wù)路由\t286
9．12．1 微服務(wù)介紹\t286
9．12．2 實(shí)現(xiàn)示例\t287
9．13 配置化路由擴(kuò)展\t294
9．13．1 配置化路由與react-router-config\t294
9．13．2 重新實(shí)現(xiàn)配置化路由\t298
9．14 配置化路由綜合示例\t303
9．14．1 路由配置\t304
9．14．2 導(dǎo)航\t310
9．14．3 使用頁(yè)簽組件\t318
9．14．4 頁(yè)簽棧維護(hù)\t325
9．15 小結(jié)\t335
參考文獻(xiàn)\t336
附錄A 從React Router v3．x遷移到React Router v4．x及以上版本\t337