序
在我剛進入前端開發行業的時候,業界普遍采用多頁面應用的模式,前端頁面依附於服務端應用平臺並作為展示模板,由服務端響應頁面間的跳轉請求。隨著前端技術的飛速發展,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。由於作者水平有限,不足之處在所難免,請廣大讀者批評指正。
李楊韜