深入理解ReactRouter:从原理到实践

深入理解ReactRouter:从原理到实践
分享
扫描下方二维码分享到微信
打开微信,点击右上角”+“,
使用”扫一扫“即可将网页分享到朋友圈。
作者:
2021-03
版次: 1
ISBN: 9787121406089
定价: 89.00
装帧: 平装
开本: 16开
页数: 356页
7人买过
  • 本书从基础内容出发,详细梳理了浏览器的基础导航能力、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
  • 内容简介:
    本书从基础内容出发,详细梳理了浏览器的基础导航能力、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
查看详情
相关图书 / 更多
深入理解ReactRouter:从原理到实践
深入理解移动互联网
吴功宜 吴英 编著
深入理解ReactRouter:从原理到实践
深入实施“四个育人”,彰显本科人才培养特色——云南大学本科教育改革与创新优秀论文集
主编唐旭光
深入理解ReactRouter:从原理到实践
深入浅出C语言程序设计(第3版·微课版)
李俊·c;强振平;荣剑;张晴晖;赵毅力;钟丽辉
深入理解ReactRouter:从原理到实践
深入浅出C#(视频教学版)
赵云
深入理解ReactRouter:从原理到实践
深入实践Kotlin元编程
霍丙乾 著
深入理解ReactRouter:从原理到实践
深入北方的小路(布克奖震撼杰作。人生在世,行走于地狱屋顶,凝望花朵。余华力荐“了不起的小说”!)
[澳]理查德·弗兰纳根 著;新经典 出品
深入理解ReactRouter:从原理到实践
深入学习习近平关于科技创新的重要论述
科学技术部编写组 著
深入理解ReactRouter:从原理到实践
深入浅出IoT:完整项目通关实战
[英]吉姆·贝内特(Jim Bennett) 著;柴火创客空间 译;[美]珍·福克斯(Jen Fox);[美]珍·卢珀(Jen Looper)
深入理解ReactRouter:从原理到实践
深入浅出SSD:固态存储核心技术、原理与实战 第2版
SSDFans 胡波 石亮 岑彪
深入理解ReactRouter:从原理到实践
深入地心 少儿科普 新华正版
英国尤斯伯恩出版公司
深入理解ReactRouter:从原理到实践
深入理解FFmpeg
刘歧 赵军 杜金房 赵文杰 宋韶颍
深入理解ReactRouter:从原理到实践
深入人心:数字产品设计的底层逻辑
林婕