深入理解react-router 路由的實(shí)現(xiàn)原理

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:07:08

深入理解react-router 路由的實(shí)現(xiàn)原理

深入理解react-router 路由的實(shí)現(xiàn)原理:React Router 是一個(gè)基于 React 之上的強(qiáng)大路由庫，它可以讓你向應(yīng)用中快速地添加視圖和數(shù)據(jù)流，同時(shí)保持頁面與 URL 間的同步。本文從兩個(gè)方便來解析 react-router 實(shí)現(xiàn)原理。一：介紹 react-router 的依賴庫history；二：使用 history 庫，

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀深入理解react-router 路由的實(shí)現(xiàn)原理:React Router 是一個(gè)基于 React 之上的強(qiáng)大路由庫，它可以讓你向應(yīng)用中快速地添加視圖和數(shù)據(jù)流，同時(shí)保持頁面與 URL 間的同步。本文從兩個(gè)方便來解析 react-router 實(shí)現(xiàn)原理。一：介紹 react-router 的依賴庫history；二：使用 history 庫，

React Router 是一個(gè)基于 React 之上的強(qiáng)大路由庫，它可以讓你向應(yīng)用中快速地添加視圖和數(shù)據(jù)流，同時(shí)保持頁面與 URL 間的同步。本文從兩個(gè)方便來解析 react-router 實(shí)現(xiàn)原理。一：介紹 react-router 的依賴庫history；二：使用 history 庫，實(shí)現(xiàn)一個(gè)簡單的 react-router 路由。

history 介紹

history 是一個(gè) JavaScript 庫，可讓您在 JavaScript 運(yùn)行的任何地方輕松管理會(huì)話歷史記錄。history 抽象出各種環(huán)境中的差異，并提供最小的 API ，使您可以管理歷史堆棧，導(dǎo)航，確認(rèn)導(dǎo)航以及在會(huì)話之間保持狀態(tài)。

history 有三種實(shí)現(xiàn)方式：

1、BrowserHistory：用于支持 HTML5 歷史記錄 API 的現(xiàn)代 Web 瀏覽器（請(qǐng)參閱跨瀏覽器兼容性）
2、HashHistory：用于舊版Web瀏覽器
3、MemoryHistory：用作參考實(shí)現(xiàn)，也可用于非 DOM 環(huán)境，如 React Native 或測(cè)試

三種實(shí)現(xiàn)方法，都是創(chuàng)建了一個(gè) history 對(duì)象，這里主要講下前面兩種：

const history = {
 length: globalHistory.length, 
 action: "POP", 
 location: initialLocation,
 createHref,
 push, // 改變location
 replace,
 go,
 goBack,
 goForward,
 block,
 listen //監(jiān)聽路由變化
};

1.頁面跳轉(zhuǎn)實(shí)現(xiàn)

BrowserHistory：pushState、replaceState;

HashHistory：location.hash、location.replace

function push(){
 createKey(); // 創(chuàng)建location的key，用于唯一標(biāo)示該location，是隨機(jī)生成的
 if(BrowserHistory){
 globalHistory.pushState({ key, state }, null, href);
 }else if(HashHistory){
 window.location.hash = path;
 }
 //上報(bào)listener 更新state ...
}
function replace(){
 createKey(); // 創(chuàng)建location的key，用于唯一標(biāo)示該location，是隨機(jī)生成的
 if(BrowserHistory){
 globalHistory.replaceState({ key, state }, null, href); 
 }else if(HashHistory){
 window.location.replace(window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + "#" path);
 } 
 //上報(bào)listener 更新state ... 
}

2.瀏覽器回退

BrowserHistory：popstate;

HashHistory：hashchang;

if(BrowserHistory){
 window.addEventListener("popstate", routerChange);
}else if(HashHistory){
 window.addEventListener("hashchange", routerChange);
}
function routerChange(){
 const location = getDOMLocation(); //獲取location
 //路由切換
 transitionManager.confirmTransitionTo(location,callback=()=>{
 //上報(bào)listener
 transitionManager.notifyListeners();
 });
}

通過 history 實(shí)現(xiàn)簡單 react-router

import { Component } from 'react';
import createHistory from 'history/createHashHistory';
const history = createHistory(); //創(chuàng)建 history 對(duì)象
/**
 * 配置路由表
 * @type {{"/": string}}
 */
const router = {
 '/': 'page/home/index',
 '/my': 'page/my/index'
}
export default class Router extends Component {
 state = { page: null }

 async route(location) {
 let pathname = location.pathname;
 let pagePath = router[pathname];
 // 加 ./的原因 https://webpack.docschina.org/api/module-methods#import-
 const Page = await import(`./${pagePath}`); //獲取路由對(duì)應(yīng)的ui
 //設(shè)置ui
 this.setState({ 
 Page: Page.default 
 });
 }

 initListener(){
 //監(jiān)聽路由切換
 history.listen((location, action) => {
 //切換路由后，更新ui
 this.route(location);
 });
 }

 componentDidMount() {
 this.route(history.location);
 this.initListener();
 }

 render() {
 const { Page } = this.state;
 return Page && <Page {...this.props} />;
 }
}

目前react-router在項(xiàng)目中已有大量實(shí)踐，其優(yōu)點(diǎn)可以總結(jié)如下:

風(fēng)格: 與React融為一體,專為react量身打造，編碼風(fēng)格與react保持一致，例如路由的配置可以通過component來實(shí)現(xiàn)

簡單: 不需要手工維護(hù)路由state，使代碼變得簡單

強(qiáng)大: 強(qiáng)大的路由管理機(jī)制，體現(xiàn)在如下方面

路由配置: 可以通過組件、配置對(duì)象來進(jìn)行路由的配置

路由切換: 可以通過<Link> Redirect進(jìn)行路由的切換

路由加載: 可以同步記載，也可以異步加載，這樣就可以實(shí)現(xiàn)按需加載

使用方式: 不僅可以在瀏覽器端的使用，而且可以在服務(wù)器端的使用

當(dāng)然react-router的缺點(diǎn)就是API不太穩(wěn)定，在升級(jí)版本的時(shí)候需要進(jìn)行代碼變動(dòng)。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com