溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-08-30 20:04:09 來源：腳本之家 閱讀：229 作者：segment_jjy 欄目：web開發(fā)

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 瀏覽器（請參閱跨瀏覽器兼容性）
2、HashHistory：用于舊版Web瀏覽器
3、MemoryHistory：用作參考實(shí)現(xiàn)，也可用于非 DOM 環(huán)境，如 React Native 或測試

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

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 對象
/**
 * 配置路由表
 * @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}`); //獲取路由對應(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)在如下方面

  • 路由配置: 可以通過組件、配置對象來進(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)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手