深入理解React Router:从原理到实践
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

序 Foreword

在我刚进入前端开发行业的时候,业界普遍采用多页面应用的模式,前端页面依附于服务端应用平台并作为展示模板,由服务端响应页面间的跳转请求。随着前端技术的飞速发展,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)

全栈工程师,先后就职于美团网、阿里巴巴