摘要:通過前端路由可以實現單頁應用本文首先從前端路由的原理出發,詳細介紹了前端路由原理的變遷。接著從的源碼出發,深入理解是如何實現前端路由的。執行上述的賦值后,頁面的發生改變。
??react-router等前端路由的原理大致相同,可以實現無刷新的條件下切換顯示不同的頁面。路由的本質就是頁面的URL發生改變時,頁面的顯示結果可以根據URL的變化而變化,但是頁面不會刷新。通過前端路由可以實現單頁(SPA)應用,本文首先從前端路由的原理出發,詳細介紹了前端路由原理的變遷。接著從react-router4.0的源碼出發,深入理解react-router4.0是如何實現前端路由的。
通過Hash實現前端路由
通過H5的history實現前端路由
React-router4.0的使用
React-router4.0源碼分析
原文的地址,在我的博客中:https://github.com/forthealll...
如有幫助,您的star是對我最好的鼓勵~
一、通過Hash實現前端路由 1、hash的原理??早期的前端路由是通過hash來實現的:
改變url的hash值是不會刷新頁面的。
??因此可以通過hash來實現前端路由,從而實現無刷新的效果。hash屬性位于location對象中,在當前頁面中,可以通過:
window.location.hash="edit"
來實現改變當前url的hash值。執行上述的hash賦值后,頁面的url發生改變。
賦值前:http://localhost:3000
賦值后:http://localhost:3000/#edit
在url中多了以#結尾的hash值,但是賦值前后雖然頁面的hash值改變導致頁面完整的url發生了改變,但是頁面是不會刷新的。此外,還有一個名為hashchange的事件,可以監聽hash的變化,我們可以通過下面兩種方式來監聽hash的變化:
window.onhashchange=function(event){ console.log(event); } window.addEventListener("hashchange",function(event){ console.log(event); })
當hash值改變時,輸出一個HashChangeEvent。該HashChangeEvent的具體值為:
{isTrusted: true, oldURL: "http://localhost:3000/", newURL: "http://localhost:3000/#teg", type: "hashchange".....}
??有了監聽事件,且改變hash頁面不刷新,這樣我們就可以在監聽事件的回調函數中,執行我們展示和隱藏不同UI顯示的功能,從而實現前端路由。
此外,除了可以通過window.location.hash來改變當前頁面的hash值外,還可以通過html的a標簽來實現:
edit2、hash的缺點
hash的兼容性較好,因此在早期的前端路由中大量的采用,但是使用hash也有很多缺點。
搜索引擎對帶有hash的頁面不友好
帶有hash的頁面內難以追蹤用戶行為
二、通過history實現前端路由HTML5的History接口,History對象是一個底層接口,不繼承于任何的接口。History接口允許我們操作瀏覽器會話歷史記錄。
(1)History的屬性和方法History提供了一些屬性和方法。
History的屬性:
History.length: 返回在會話歷史中有多少條記錄,包含了當前會話頁面。此外如果打開一個新的Tab,那么這個length的值為1
History.state:
保存了會出發popState事件的方法,所傳遞過來的屬性對象(后面會在pushState和replaceState方法中詳細的介紹)
History方法:
History.back(): 返回瀏覽器會話歷史中的上一頁,跟瀏覽器的回退按鈕功能相同
History.forward():指向瀏覽器會話歷史中的下一頁,跟瀏覽器的前進按鈕相同
History.go(): 可以跳轉到瀏覽器會話歷史中的指定的某一個記錄頁
History.pushState():pushState可以將給定的數據壓入到瀏覽器會話歷史棧中,該方法接收3個參數,對象,title和一串url。pushState后會改變當前頁面url,但是不會伴隨著刷新
History.replaceState():replaceState將當前的會話頁面的url替換成指定的數據,replaceState后也會改變當前頁面的url,但是也不會刷新頁面。
上面的方法中,pushState和repalce的相同點:
就是都會改變當前頁面顯示的url,但都不會刷新頁面。
不同點:
pushState是壓入瀏覽器的會話歷史棧中,會使得History.length加1,而replaceState是替換當前的這條會話歷史,因此不會增加History.length.
(2)BOM對象historyhistory在瀏覽器的BOM對象模型中的重要屬性,history完全繼承了History接口,因此擁有History中的所有的屬性和方法。
這里我們主要來看看history.length屬性以及history.pushState、history.replaceState方法。
history.pushState(stateObj,title,url) or history.replaceState(stateObj,title,url)
pushState和replaceState接受3個參數,分別為state對象,title標題,改變的url。
window.history.pushState({foo:"bar"}, "page 2", "bar.html");
此時,當前的url變為:
執行上述方法前:http://localhost:3000
執行上述方法后:http://localhost:3000/bar.html
如果我們輸出window.history.state:
console.log(window.history.state);
// {foo:"bar"}
window.history.state就是我們pushState的第一個對象參數。
history.replaceState()方法不會改變hitroy的長度
console.log(window.history.length);
window.history.replaceState({foo:"bar"}, "page 2", "bar.html");
console.log(window.history.length);
上述前后兩次輸出的window.history.length是相等的。
此外。
每次觸發history.back()或者瀏覽器的后退按鈕等,會觸發一個popstate事件,這個事件在后退或者前進的時候發生:
window.onpopstate=function(event){ }
注意:
history.pushState和history.replaceState方法并不會觸發popstate事件。
如果用history做為路由的基礎,那么需要用到的是history.pushState和history.replaceState,在不刷新的情況下可以改變url的地址,且如果頁面發生回退back或者forward時,會觸發popstate事件。
hisory為依據來實現路由的優點:
對搜索引擎友好
方便統計用戶行為
缺點:
兼容性不如hash
需要后端做相應的配置,否則直接訪問子頁面會出現404錯誤
三、React-router4.0的使用了解了前端路由實現的原理之后,下面來介紹一下React-router4.0。在React-router4.0的代碼庫中,根據使用場景包含了以下幾個獨立的包:
react-router : react-router4.0的核心代碼
react-router-dom : 構建網頁應用,存在DOM對象場景下的核心包
react-router-native : 適用于構建react-native應用
react-router-config : 配置靜態路由
react-router-redux : 結合redux來配置路由,已廢棄,不推薦使用。
在react-router4.0中,遵循Just Component的設計理念:
所提供的API都是以組件的形式給出。
比如BrowserRouter、Router、Link、Switch等API都是以組件的形式來使用。
1、React-router-dom常用的組件API下面我們以React-router4.0中的React-router-dom包來介紹常用的BrowserRouter、HashRouter、Link和Router等。
(1)用
basename: string 這個屬性,是為當前的url再增加名為basename的值的子目錄。
如果設置了basename屬性,那么此時的:
http://localhost:3000 和 http://localhost:3000/test 表示的是同一個地址,渲染的內容相同。
getUserConfirmation: func 這個屬性,用于確認導航的功能。默認使用window.confirm
forceRefresh: bool 默認為false,表示改變路由的時候頁面不會重新刷新,如果當前瀏覽器不支持history,那么當forceRefresh設置為true的時候,此時每次去改變url都會重新刷新整個頁面。
keyLength: number 表示location的key屬性的長度,在react-router中每個url下都有為一個location與其對應,并且每一個url的location的key值都不相同,這個屬性一般都使用默認值,設置的意義不大。
children: node children的屬性必須是一個ReactNode節點,表示唯一渲染一個元素。
與
首先來看如何執行匹配,決定
path:當location中的url改變后,會與Route中的path屬性做匹配,path決定了與路由或者url相關的渲染效果。
exact: 如果有exact,只有url地址完全與path相同,才會匹配。如果沒有exact屬性,url的地址不完全相同,也會匹配。
舉例來說,當exact不設置時:
此時url地址為:http://localhost:3000/home/first 的時候,不僅僅會匹配到 path="/home/first"時的組件First,同時還會匹配到path="home"時候的Router。
如果設置了exact:
只有http://localhost:3000/home/first 不會匹配Home組件,只有url地址完全與path相同,只有http://localhost:3000/home才能匹配Home組件成功。
strict :與exact不同,strict屬性僅僅是對exact屬性的一個補充,設置了strict屬性后,嚴格限制了但斜線“/”。
舉例來說,當不設置strict的時候:
此時http://localhost:3000/home 和 http://localhost:3000/home/
都能匹配到組件Home。匹配對于斜線“/”比較寬松。如果設置了strict屬性:
那么此時嚴格匹配斜線是否存在,http://localhost:3000/home 將無法匹配到Home組件。
當Route組件與某一url匹配成功后,就會繼續去渲染。那么什么屬性決定去渲染哪個組件或者樣式呢,Route的component、render、children決定渲染的內容。
component:該屬性接受一個React組件,當url匹配成功,就會渲染該組件
render:func 該屬性接受一個返回React Element的函數,當url匹配成功,渲染覆該返回的元素
children:與render相似,接受一個返回React Element的函數,但是不同點是,無論url與當前的Route的path匹配與否,children的內容始終會被渲染出來。
并且這3個屬性所接受的方法或者組件,都會有location,match和history這3個參數。如果組件,那么組件的props中會存在從Link傳遞過來的location,match以及history。
(3)to: string
to屬性的值可以為一個字符串,跟html中的a標簽的href一樣,即使to屬性的值是一個字符串,點擊Link標簽跳轉從而匹配相應path的Route,也會將history,location,match這3個對象傳遞給Route所對應的組件的props中。
舉例來說:
Home
如上所示,當to接受一個string,跳轉到url為"/home"所匹配的Route,并渲染其關聯的組件內接受3個對象history,location,match。
這3個對象會在下一小節會詳細介紹。
to: object
to屬性的值也可以是一個對象,該對象可以包含一下幾個屬性:pathname、seacth、hash和state,其中前3個參數與如何改變url有關,最后一個state參數是給相應的改變url時,傳遞一個對象參數。
舉例來說:
Home
在上個例子中,to為一個對象,點擊Link標簽跳轉后,改變后的url為:"/home?sort=name#edit"。 但是在與相應的Route匹配時,只匹配path為"/home"的組件,"/home?sort=name#edit"。在"/home"后所帶的參數不作為匹配標準,僅僅是做為參數傳遞到所匹配到的組件中,此外,state={a:1}也同樣做為參數傳遞到新渲染的組件中。
(4) React-router中傳遞給組件props的history對象介紹了
我們前面提到,Route匹配到相應的改變后的url,會渲染新組件,該新組件中的props中有history、location、match3個對象屬性,其中hisotry對象屬性最為關鍵。
同樣以下面的例子來說明:
Home
我們使用了
// props中的history action: "PUSH" block: ? block() createHref: ? createHref(location) go: ? go(n) goBack: ? goBack() goForward: ? goForward() length: 12 listen: ? listen(listener) location: {pathname: "/home", search: "?sort=name", hash: "#edit", state: {…}, key: "uxs9r5"} push: ? push(path, state) replace: ? replace(path, state)
從上面的屬性明細中:
push:f 這個方法用于在js中改變url,之前在Link組件中可以類似于HTML標簽的形式改變url。push方法映射于window.history中的pushState方法。
replace: f 這個方法也是用于在js中改變url,replace方法映射于window.history中的replaceState方法。
block:f 這個方法也很有用,比如當用戶離開當前頁面的時候,給用戶一個文字提示,就可以采用history.block("你確定要離開當前頁嗎?")這樣的提示。
go / goBack / goForward
在組件props中history的go、goBack、goForward方法,分別window.history.go、window.history.back、window.history.forward對應。
action: "PUSH" || "POP"
action這個屬性左右很大,如果是通過Link標簽或者在js中通過this.props.push方法來改變當前的url,那么在新組件中的action就是"PUSH",否則就是"POP".
action屬性很有用,比如我們在做翻頁動畫的時候,前進的動畫是SlideIn,后退的動畫是SlideOut,我們可以根據組件中的action來判斷采用何種動畫:
function newComponent (props)=>{ return () }
location:object
在新組件的location屬性中,就記錄了從就組件中傳遞過來的參數,從上面的例子中,我們看到此時的location的值為:
hash: "#edit" key: "uxs9r5" pathname: "/home" search: "?sort=name" state: {a:1}
除了key這個用作唯一表示外,其他的屬性都是我們從上一個Link標簽中傳遞過來的參數。
四、React-router4.0源碼分析在第三節中我們介紹了React-router的大致使用方法,讀一讀React-router4.0的源碼。
這里我們主要分析一下React-router4.0中是如何根據window.history來實現前端路由的,因此設計到的組件為BrowserRouter、Router、Route和Link
1、React-router中的history從上一節的介紹中我們知道,點擊Link標簽傳遞給新渲染的組件的props中有一個history對象,這個對象的內容很豐富,比如:action、goBack、go、location、push和replace方法等。
React-router構建了一個History類,用于在window.history的基礎上,構建屬性更為豐富的實例。該History類實例化后具有action、goBack、location等等方法。
React-router中將這個新的History類的構建方法,獨立成一個node包,包名為history。
npm install history -s
可以通過上述方法來引入,我們來看看這個History類的實現。
const createBrowserHistory = (props = {}) => { const globalHistory = window.history; ...... //默認props中屬性的值 const { forceRefresh = false, getUserConfirmation = getConfirmation, keyLength = 6, basename = "", } = props; const history = { length: globalHistory.length, action: "POP", location: initialLocation, createHref, push, replace, go, goBack, goForward, block, listen }; ---- (1) const basename = props.basename; const canUseHistory = supportsHistory(); ----(2) const createKey = () =>Math.random().toString(36).substr(2, keyLength); ----(3) const transitionManager = createTransitionManager(); ----(4) const setState = nextState => { Object.assign(history, nextState); history.length = globalHistory.length; transitionManager.notifyListeners(history.location, history.action); }; ----(5) const handlePopState = event => { handlePop(getDOMLocation(event.state)); }; const handlePop = location => { if (forceNextPop) { forceNextPop = false; setState(); } else { const action = "POP"; transitionManager.confirmTransitionTo( location, action, getUserConfirmation, ok => { if (ok) { setState({ action, location }); } else { revertPop(location); } } ); } }; ------(6) const initialLocation = getDOMLocation(getHistoryState()); let allKeys = [initialLocation.key]; ------(7) // 與pop相對應,類似的push和replace方法 const push ... replace ... ------(8) return history ------ (9) }
(1) 中指明了新的構建方法History所返回的history對象中所具有的屬性。
(2)中的supportsHistory的方法判斷當前的瀏覽器對于window.history的兼容性,具體方法如下:
export const supportsHistory = () => { const ua = window.navigator.userAgent; if ( (ua.indexOf("Android 2.") !== -1 || ua.indexOf("Android 4.0") !== -1) && ua.indexOf("Mobile Safari") !== -1 && ua.indexOf("Chrome") === -1 && ua.indexOf("Windows Phone") === -1 ) return false; return window.history && "pushState" in window.history; };
從上述判別式我們可以看出,window.history在chrome、mobile safari和windows phone下是絕對支持的,但不支持安卓2.x以及安卓4.0
(3)中用于創建與history中每一個url記錄相關聯的指定位數的唯一標識key, 默認的keyLength為6位
(4)中 createTransitionManager方法,返回一個集成對象,對象中包含了關于history地址或者對象改變時候的監聽函數等,具體代碼如下:
const createTransitionManager = () => { const setPrompt = nextPrompt => { }; const confirmTransitionTo = ( location, action, getUserConfirmation, callback ) => { if (typeof getUserConfirmation === "function") { getUserConfirmation(result, callback); } else { callback(true); } } }; let listeners = []; const appendListener = fn => { let isActive = true; const listener = (...args) => { if (isActive) fn(...args); }; listeners.push(listener); return () => { isActive = false; listeners = listeners.filter(item => item !== listener); }; }; const notifyListeners = (...args) => { listeners.forEach(listener => listener(...args)); }; return { setPrompt, confirmTransitionTo, appendListener, notifyListeners };
};
setPrompt函數,用于設置url跳轉時彈出的文字提示,confirmTransaction函數,會將當前生成新的history對象中的location,action,callback等參數,作用就是在回調的callback方法中,根據要求,改變傳入的location和action對象。
接著我們看到有一個listeners數組,保存了一系列與url相關的監聽事件數組,通過接下來的appendListener方法,可以往這個數組中增加事件,通過notifyListeners方法可以遍歷執行listeners數組中的所有事件。
(5) setState方法,發生在history的url或者history的action發生改變的時候,此方法會更新history對象中的屬性,同時會觸發notifyListeners方法,傳入當前的history.location和history.action。遍歷并執行所有監聽url改變的事件數組listeners。
(6)這個getDOMLocation方法就是根據當前在window.state中的值,生成新history的location屬性對象,allKeys這是始終保持了在url改變時候的歷史url相關聯的key,保存在全局,allKeys在執行生“POP”或者“PUSH”、“Repalce”等會改變url的方法時,會保持一個實時的更新。
(7) handlePop方法,用于處理“POP”事件,我們知道在window.history中點擊后退等會觸發“POP”事件,這里也是一樣,執行action為“POP”,當后退的時候就會觸發該函數。
(8)中包含了與pop方法類似的,push和replace方法,push方法同樣做的事情就是執行action為“PUSH”(“REPLACE”),該變allKeys數組中的值,唯一不同的是actio為“PUSH”的方法push是往allKeys數組中添加,而action為“REPLACE”的方法replace則是替換掉當前的元素。
(9)返回這個新生成的history對象。
2、React-router中Link組件其實最難弄懂的是React-router中如何重新構建了一個history工廠函數,在第一小節中我們已經詳細的介紹了history生成函數createBrowserHistory的源碼,接著來看Link組件就很容易了。
首先Link組件類似于HTML中的a標簽,目的也很簡單,就是去主動觸發改變url的方法,主動改變url的方法,從上述的history的介紹中可知為push和replace方法,因此Link組件的源碼為:
class Link extends React.Component { handleClick = event => { ... const { history } = this.context.router; const { replace, to } = this.props; if (replace) { history.replace(replace); } else { history.push(to); } } }; render(){ const { replace, to, innerRef, ...props } = this.props; } }
上述代碼很簡單,從React的context API全局對象中拿到history,然后如果傳遞給Link組件的屬性中有replace為true,則執行history.replace(to),to 是一個包含pathname的對象,如果傳遞給Link組件的replace屬性為false,則執行history.push(to)方法。
3、React-router中Route組件Route組件也很簡單,其props中接受一個最主要的屬性path,Route做的事情只有一件:
當url改變的時候,將path屬性與改變后的url做對比,如果匹配成功,則渲染該組件的componet或者children屬性所賦值的那個組件。
具體源碼如下:
class Route extends React.Component { .... constructor(){ } render() { const { match } = this.state; const { children, component, render } = this.props; const { history, route, staticContext } = this.context.router; const location = this.props.location || route.location; const props = { match, location, history, staticContext }; if (component) return match ? React.createElement(component, props) : null; if (render) return match ? render(props) : null; if (typeof children === "function") return children(props); if (children && !isEmptyChildren(children)) return React.Children.only(children); return null; } }
state中的match就是是否匹配的標記,如果匹配當前的Route的path,那么根據優先級順序component屬性、render屬性和children屬性來渲染其所指向的React組件。
4、React-router中Router組件Router組件中,是BrowserRouter、HashRouter等組件的底層組件。該組件中,定義了包含匹配規則match函數,以及使用了新history中的listener方法,來監聽url的改變,從而,當url改變時,更改Router下不同path組件的isMatch結果。
class Router extends React.Component { componentWillMount() { const { children, history } = this.props //調用history.listen監聽方法,該方法的返回函數是一個移除監聽的函數 this.unlisten = history.listen(() => { this.setState({ match: this.computeMatch(history.location.pathname) }); }); } componentWillUnmount() { this.unlisten(); } render() { } }
上述首先在組件創建前調用了listener監聽方法,來監聽url的改變,實時的更新isMatch的結果。
5、總結本文從前端路由的原理出發,先后介紹了兩種前端路由常用的方法,接著介紹了React-router的基本組件API以及用法,詳細介紹了React-router的組件中新構建的history對象,最后結合React-router的API閱讀了一下React-router的源碼。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97860.html
摘要:回調函數將在更新時觸發,回調中的起到了新的的作用。注冊回調在中使用注冊的回調函數,最終放在模塊的回調函數數組中。 原文地址:https://github.com/joeyguo/blog/issues/2 在單頁應用上,前端路由并不陌生。很多前端框架也會有獨立開發或推薦配套使用的路由系統。那么,當我們在談前端路由的時候,還可以談些什么?本文將簡要分析并實現一個的前端路由,并對 reac...
摘要:另外,內置的函數在經過一系列校驗后,觸發,之后被更改,之后依次調用監聽,完成整個狀態樹的更新。總而言之,遵守這套規范并不是強制性的,但是項目一旦稍微復雜一些,這樣做的好處就可以充分彰顯出來。 這一篇是接上一篇react進階漫談的第二篇,這一篇主要分析redux的思想和應用,同樣參考了網絡上的大量資料,但代碼同樣都是自己嘗試實踐所得,在這里分享出來,僅供一起學習(上一篇地址:個人博客/s...
摘要:另外,內置的函數在經過一系列校驗后,觸發,之后被更改,之后依次調用監聽,完成整個狀態樹的更新。總而言之,遵守這套規范并不是強制性的,但是項目一旦稍微復雜一些,這樣做的好處就可以充分彰顯出來。 這一篇是接上一篇react進階漫談的第二篇,這一篇主要分析redux的思想和應用,同樣參考了網絡上的大量資料,但代碼同樣都是自己嘗試實踐所得,在這里分享出來,僅供一起學習(上一篇地址:個人博客/s...
摘要:我們在內部來渲染不同的組件我們這里采用哈希路由的方式,鑒于的渲染機制,我們需要把值綁定進入內部。 手挽手帶你學React入門三檔,帶你學會使用Reacr-router4.x,開始創建屬于你的React項目 什么是React-router React Router 是一個基于 React 之上的強大路由庫,它可以讓你向應用中快速地添加視圖和數據流,同時保持頁面與 URL 間的同步。通俗一...
閱讀 1321·2021-09-22 15:09
閱讀 2656·2021-08-20 09:38
閱讀 2402·2021-08-03 14:03
閱讀 863·2019-08-30 15:55
閱讀 3368·2019-08-30 12:59
閱讀 3551·2019-08-26 13:48
閱讀 1886·2019-08-26 11:40
閱讀 647·2019-08-26 10:30