本书从基础内容出发,详细梳理了浏览器的基础导航能力、history库的使用及原理,以及React Hooks等基础知识,帮助读者学习并掌握React Router的前驱知识。同时,本书从React Router的发展历程、技术演变出发,介绍了React Router的设计思路,并通过路由器、路由端口、导航三要素,引出React Router的基本使用方法,并对源码进行了全面解析。此外,本书各章使用React Hooks穿插了30余个案例,在兼顾实用性、可扩展性的同时,为读者学习与理解React Router提供了全面丰富的素材。通过阅读本书,读者不仅可以融会贯通地掌握React Router,而且能提升对前端路由的认识,并掌握前端领域路由的设计思路与方法。
本书适合有JavaScript或TypeScript基础,想要学习使用React Router,或对React Router实现原理和工程实践感兴趣的开发者阅读。
诠释前端路由的设计哲理
全方位揭秘ReactRouter技术细节
探寻ReactRouter在前端开发中的实践方法
在我刚进入前端开发行业的时候,业界普遍采用多页面应用的模式,前端页面依附于服务端应用平台并作为展示模板,由服务端响应页面间的跳转请求。随着前端技术的飞速发展,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上获取本书的源码:https://github.com/klfzlyt/react-router-tutorial。
本书的完成离不开在各个方面给予我支持和帮助的人,感谢我的同事曾静益、李宏,他们给本书提出了很多宝贵的意见;感谢电子工业出版社博文视点的编辑宋亚东,他在编辑和审校本书期间提出了宝贵的意见;最后,感谢我的家人、朋友、同学在我创作本书期间给予的宽容和支持。
如果您在阅读本书的过程中有任何问题,可以发送邮件到作者的邮箱反馈:klfzlyt@outlook. com。由于作者水平有限,不足之处在所难免,请广大读者批评指正。
李杨韬