快捷導(dǎo)航

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

更新時(shí)間：2018年09月26日 10:17:44 作者：segment_jjy

這篇文章主要介紹了深入理解react-router 路由的實(shí)現(xiàn)原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

history 介紹

history 是一個(gè) JavaScript 庫(kù)，可讓您在 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.頁(yè)面跳轉(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)簡(jiǎ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)

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

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