摘要：要實(shí)現(xiàn)的功能我們使用開發(fā)項(xiàng)目的時(shí)候，基本上是單頁(yè)面應(yīng)用，也就離不開路由。路由看似神秘，當(dāng)我們簡(jiǎn)單的模擬一下它的核心功能后，發(fā)現(xiàn)也就這么回事兒。實(shí)現(xiàn)的邏輯是，返回中跟匹配到的第一個(gè)孩子。

我們使用React開發(fā)項(xiàng)目的時(shí)候，基本上是單頁(yè)面應(yīng)用，也就離不開路由。路由看似神秘，當(dāng)我們簡(jiǎn)單的模擬一下它的核心功能后，發(fā)現(xiàn)也就這么回事兒。本文就詳細(xì)的介紹一下react-router-dom 的 HashRouter的核心實(shí)現(xiàn)邏輯。

本文實(shí)現(xiàn)的功能主要包含：

HashRouter

Route

Link

MenuLink

Switch

Redirect

先不說(shuō)代碼是怎樣寫的，先上圖，讓大家看一下這個(gè)HashRouter到底是個(gè)什么東東:

好吧，肯定有人會(huì)說(shuō)這些圈圈又是什么東東呀，客官不要著急，待我慢慢解釋：

HashRouter是一個(gè)大的容器，它控制著他自己到底渲染成什么樣子，那么它是通過(guò)什么控制的呢，看它的名字就能猜出來(lái)，那就是window.location.hash。

當(dāng)HashRouter開始渲染的時(shí)候就會(huì)拿它自己身上的pathname屬性跟它肚子里的Route的path進(jìn)行匹配，匹配上的話，就會(huì)渲染Route的component對(duì)應(yīng)的組件。

Link是怎樣切換路由的呢，很簡(jiǎn)單，就是通過(guò)this.props.history.push(path)來(lái)改變HashRouter中的pathname屬性，進(jìn)而驅(qū)動(dòng)Route們 進(jìn)行重新渲染，再次匹配我們的路由，最終實(shí)現(xiàn)路由的切換。

介紹了一下簡(jiǎn)單的邏輯，接下來(lái)我們就看一下具體是怎樣實(shí)現(xiàn)的吧，如下圖：

HashRouter是一個(gè)繼承了React.Component的類，這個(gè)類上的state包括location,監(jiān)聽著hash的變化以驅(qū)動(dòng)Route組件的重新渲染，另外還有一個(gè)history屬性，可以切換頁(yè)面的路由。

本文要實(shí)現(xiàn)的功能中包括Route、Link、MenuLink、Switch、 Redirect，其中Route的是基礎(chǔ)是核心，MenuLink和某些有特定邏輯的渲染都是在Route的基礎(chǔ)上實(shí)現(xiàn)的。

Route組件上可以接收三種變量，包括component、render、children，其中render、children是都是函數(shù)，render是根據(jù)特定的邏輯渲染元素，children是用來(lái)渲染MenuLink,這兩個(gè)函數(shù)都接收當(dāng)前路由的props，函數(shù)的返回值是要渲染的元素。

Switch實(shí)現(xiàn)的邏輯是，返回children中跟hash匹配到的第一個(gè)“孩子”。

HashRouter將window.loacation.hash跟自己的state掛鉤，通過(guò)改變自己的state驅(qū)動(dòng)頁(yè)面的重新渲染。

import React, {Component} from "react";
import PropTypes from "prop-types";

export default class HashRouter extends Component {
    constructor() {
        super();
        this.state = {
            location: {
                pathname: window.location.hash.slice(1) || "/", // 當(dāng)前頁(yè)面的hash值
                state: {}   //保存的狀態(tài)
            }
        };
    }
    
    // 定義上下文的變量類型
    static childContextTypes = {
        location: PropTypes.object,
        history: PropTypes.object
    }
    
    // 定義上下文的變量
    getChildContext() {
        return {
            location: this.state.location,
            history: {
                push: (path) => { // 就是更新 window.hash值
                    if (typeof path === "object") {
                        let {pathname, state} = path;
                        this.setState({
                            location: {
                                ...this.state.location,
                                state // {from: "/profile"}
                            }
                        }, () => {
                            window.location.hash = pathname;
                        })
                    } else {
                        window.location.hash = path;
                    }
                }
            }
        }
    }
    
    render() {
        return this.props.children; // 渲染頁(yè)面元素
    }
    
    componentDidMount() {
        window.location.hash = window.location.hash.slice(1) || "/";
        // 監(jiān)聽window的hash的變化，驅(qū)動(dòng)頁(yè)面的重新刷新
        window.addEventListener("hashchange", () => {
            this.setState({
                location: {
                    ...this.state.location,
                    pathname: window.location.hash.slice(1) || "/"
                }
            });
        })
    }
}

Route的渲染核心邏輯就是將自己的path和當(dāng)前頁(yè)面的hash進(jìn)行匹配，匹配上了就渲染相應(yīng)的元素，匹配不上就什么都不渲染。

import React, {Component} from "react";
import PropTypes from "prop-types";
import pathToRegexp from "path-to-regexp"

export default class Route extends Component {
    // 定義上下文context的類型
    static contextTypes = {
        location: PropTypes.object,
        history: PropTypes.object
    }
    
    render() {
        // 解構(gòu)傳入Route的props
        let {path, component: Component, render, children} = this.props;
        
        // 解構(gòu)上下文的屬性
        let {location, history} = this.context;
        let props = {
            location,
            history
        };
        
        // 將傳入Route的path和當(dāng)前的hash進(jìn)行匹配
        let keys = [];
        let regexp = pathToRegexp(path, keys, {end: false});
        keys = keys.map(key => key.name);
        
        let result = location.pathname.match(regexp);
        
        if (result) { // 匹配上了
            let [url, ...values] = result;
            props.match = {
                path,
                url,
                params: keys.reduce((memo, key, index) => { // 獲取匹配到的參數(shù)
                    memo[key] = values[index];
                    return memo;
                }, {})
            };
            
            if (Component) { // 普通的Route
                return ;
            } else if (render) { // 特定邏輯的渲染
                return render(props);
            } else if (children) { // MenuLink的渲染
                return children(props);
            } else {
                return null;
            }
        } else { // 沒有匹配上
            if (children) { // MenuLink的渲染
                return children(props);
            } else {
                return null;
            }
        }
    }
}

Redirect就干了一件事，就是改變HashRouter的state,驅(qū)動(dòng)重新渲染。

import React, {Component} from "react";
import PropTypes from "prop-types";

export default class Redirect extends Component {
    // 定義上下文context的Type
    static contextTypes = {
        history: PropTypes.object
    }
    
    componentDidMount() {
        // 跳轉(zhuǎn)到目標(biāo)路由
        this.context.history.push(this.props.to);
    }
    
    render() {
        return null;
    }
}

import React, {Component} from "react";
import Route from "./Route";
import Link from "./Link"

export default ({to, children}) => {
    // 如果匹配到了，就給當(dāng)前組件一個(gè)激活狀態(tài)的className
    return  (
        

            {children}
        
    )
    }/>
}

Link就是渲染成一個(gè)a標(biāo)簽，然后給一個(gè)點(diǎn)擊事件，點(diǎn)擊的時(shí)候更改HashRouter的狀態(tài)，驅(qū)動(dòng)重新渲染。

import React, {Component} from "react";
import PropTypes from "prop-types";

export default class Link extends Component {
    static contextTypes = {
        history: PropTypes.object
    }
    
    render() {
        return (
             this.context.history.push(this.props.to)}>{this.props.children}
        )
    }
}

import React, {Component} from "react";
import PropTypes from "prop-types";
import pathToRegexp from "path-to-regexp";

export default class Switch extends Component {
    static contextTypes = {
        location: PropTypes.object
    }
    
    render() {
        let {pathname} = this.context.location;
        
        let children = this.props.children;
        for (let i = 0, l = children.length; i < l; i++) {
            let child = children[i];
            let path = child.props.path;
            
            if (pathToRegexp(path, [], {end: false}).test(pathname)) {
                // 將匹配到的第一個(gè)元素返回
                return child;
            }
        }
        return null
    }
}

好了，這幾個(gè)功能介紹完了，你是否對(duì)HashRouter的原理有所了解了呢？本文只是貼出部分代碼，如果有需要請(qǐng)看demo可以手動(dòng)體驗(yàn)一下哦。

參考文獻(xiàn)：

react-router