react-router瞭解一下

清明時節雨紛紛，不如在家擼代碼。從零開始實現一個react-router，並跑通react-router-dom裏的example。

react-router是作SPA(不是你想的SPA)時，控制不一樣的url渲染不一樣的組件的js庫。用react-router能夠方便開發，不須要手動維護url和組件的對應關係。開發時用react-router-dom，react-router-dom裏面的組件是對react-router組件的封裝。

SPA的原理

單頁應用的原理用兩種，一種是經過hash的變化，改變頁面，另外一種是經過url的變化改變頁面。

• hash
  • window.location.hash='xxx' 改變hash
  • window.addEventListener('hashchange',fun) 監聽hash的改變
• url
  • history.pushState(obj,title,'/url') 改變url
  • window.addEventListener('popstate',fun) 當瀏覽器向前向後時，觸發該事件。

React-Router-dom的核心組件

• Router
  • Router是一個外層，最後render的是它的子組件，不渲染具體業務組件。
  • 分爲HashRouter(經過改變hash)、BrowserRouter(經過改變url)、MemoryRouter
  • Router負責選取哪一種方式做爲單頁應用的方案hash或browser或其餘的，把HashRouter換成BrowserRouter，代碼能夠繼續運行。
  • Router的props中有一個history的對象，history是對window.history的封裝，history的負責管理與瀏覽器歷史記錄的交互和哪一種方式的單頁應用。history會做爲childContext裏的一個屬性傳下去。
• Route
  • 負責渲染具體的業務組件，負責匹配url和對應的組件
  • 有三種渲染的組件的方式：component(對應的組件)、render(是一個函數，函數裏渲染組件)、children(不管哪一種路由都會渲染)
• Switch
  • 匹配到一個Route子組件就返回再也不繼續匹配其餘組件。
• Link
  • 跳轉路由時的組件，調用history.push把改變url。

history

• history是管理與瀏覽器歷史記錄的交互，和用哪一種方式實現單頁應用。這裏實現了一個簡單的history
• MyHistory是父類，HashHistory、BrowserHistory是兩個子類。
• HashHistory和BrowserHistory實例的loaction屬性是相同的，因此updateLocation是子類方法。location的pathname在HashHistory是hash的#後面的值，在BrowserHistory是window.location.pathname。
• 兩個子類裏有一個_push方法，用來改變url，都是用的history.pushState方法。

let confirm;
export default class MyHistory {
    constructor() {
        this.updateLocation();//改變實例上的location變量，子類實現
    }
    go() {
    //跳到第幾頁
    }
    goBack() {
    //返回
    }
    goForward() {
    //向前跳
    }
    push() {
    //觸發url改變
        if (this.prompt(...arguments)) {
            this._push(...arguments);//由子類實現
            this.updateLocation();  
            this._listen();
            confirm = null;     //頁面跳轉後把confirm清空
        }
    }
    listen(fun) {
    //url改變後監聽函數
        this._listen = fun;
    }
    createHref(path) {
    // Link組件裏的a標籤的href
        if (typeof path === 'string') return path;
        return path.pathname;
    }
    block(message) {
    //window.confirm的內容多是傳入的字符串，多是傳入的函數返回的字符串
        confirm = message;
    }
    prompt(pathname) {
    //實現window.confirm，肯定後跳轉，不然不跳轉
        if (!confirm) return true;
        const location = Object.assign(this.location,{pathname});
        const result = typeof confirm === 'function' ? confirm(location) : confirm;
        return window.confirm(result);
    }
}
複製代碼

import MyHistory from './MyHistory';
class HashHistory extends MyHistory {
    _push(hash) {
    //改變hash
        history.pushState({},'','/#'+hash);
    }
    updateLocation() {
    //獲取location
        this.location = {
            pathname: window.location.hash.slice(1) || '/',
            search: window.location.search
        }
    }
}
export default function createHashHistory() {
//建立HashHistory
    const history = new HashHistory();
    //監聽前進後退事件
    window.addEventListener('popstate', () => {
        history.updateLocation();
        history._listen();
    });
    return history;
};
複製代碼

import MyHistory from './MyHistory';
class BrowserHistory extends MyHistory{
    _push(path){
    //改變url
        history.pushState({},'',path);
    }
    updateLocation(){
        this.location = {
            pathname:window.location.pathname,
            search:window.location.search
        };
    }
}
export default function createHashHistory(){
//建立BrowserHistory
    const history = new BrowserHistory();
    window.addEventListener('popstate',()=>{
        history.updateLocation();
        history._listen();
    });
    return history;
};
複製代碼

Router

• HashRouter和BrowserRouter是對Router的封裝，傳入Router的history對象不一樣
• Router中要建立childContext，history是props的history，location是history裏的location，match是Route組件裏匹配url後的結果
• history的listen傳入函數，url改變後從新渲染

import PropTypes from 'prop-types';//類型檢查
export default class HashRouter extends Component {
    static propTypes = {
        history: PropTypes.object.isRequired,
        children: PropTypes.node
    }
    static childContextTypes = {
        history: PropTypes.object,
        location: PropTypes.object,
        match:PropTypes.object
    }
    getChildContext() {
        return {
            history: this.props.history,
            location: this.props.history.location,
            match:{
                path: '/',
                url: '/',
                params: {}
            }
        }
    }
    componentDidMount() {
        this.props.history.listen(() => {
            this.setState({})
        });
    }
    render() {
        return this.props.children;
    }
}
複製代碼

import React,{Component} from 'react';
import PropTypes from 'prop-types';
import {createHashHistory as createHistory} from './libs/history';
import Router from './Router';
export default class HashRouter extends Component{
    static propTypes = {
        children:PropTypes.node
    }
    history = createHistory()
    render(){
        return <Router history={this.history} children={this.props.children}/>;
    }
}
複製代碼

import {createBrowserHistory as createHistory} from './libs/history';
export default class BrowserRouter extends Component{
    static propTypes = {
        children:PropTypes.node
    }
    history = createHistory()
    render(){
        return <Router history={this.history} children={this.props.children}/>;
    }
}
複製代碼

Route

• Route經過props裏的path和url進行匹配，匹配到了，渲染組件，繼續匹配下一個。
• Route裏用到path-to-regexp匹配路徑，獲取匹配到的params
• Route有三種渲染組件的方法，要分別處理
• Route的props有一個exact屬性。若是是true，匹配時到path結束，要和location.pathname準確匹配。
• Route的Context是Router建立的location、history、match，每次匹配完成，要改變Route裏的match。

import pathToRegexp from 'path-to-regexp';
export default class Route extends Component {
    static contextTypes = {
        location: PropTypes.object,
        history: PropTypes.object,
        match:PropTypes.object
    }
    static propTypes = {
        component: PropTypes.func,
        render: PropTypes.func,
        children: PropTypes.func,
        path: PropTypes.string,
        exact: PropTypes.bool
    }
    static childContextTypes = {
        history:PropTypes.object
    }
    getChildContext(){
        return {
            history:this.context.history
        }
    }
    computeMatched() {
        const {path, exact = false} = this.props;
        if(!path) return this.context.match;
        const {location: {pathname}} = this.context;
        const keys = [];
        const reg = pathToRegexp(path, keys, {end: exact});
        const result = pathname.match(reg);
        if (result) {
            return {
                path: path,
                url: result[0],
                params: keys.reduce((memo, key, index) => {
                    memo[key.name] = result[index + 1];
                    return memo
                }, {})
            };
        }
        return false;
    }
    render() {
        let props = {
            location: this.context.location,
            history: this.context.history
        };
        const { component: Component, render,children} = this.props;
        const match = this.computeMatched();
        if(match){
            props.match = match;
            if (Component) return <Component {...props} />;
            if (render) return render(props);
        }
        if(children) return children(props);
        return null;
    }
}
複製代碼

Switch

• Switch能夠套在Route的外面，匹配到了一個Route，就再也不往下匹配。
• Switch也用到了路徑匹配，和Route裏的方法相似，能夠提取出來，在react-router-dom裏的example用到Switch的地方很少，因此沒有提取。

import pathToRegexp from 'path-to-regexp';
export default class Switch extends Component{
    static contextTypes = {
        location:PropTypes.object
    }
    constructor(props){
        super(props);
        this.path = props.path;
        this.keys = [];
    }
    match(pathname,path,exact){
        return pathToRegexp(path,[],{end:exact}).test(pathname);
    }
    render(){
        const {location:{pathname}} = this.context;
        const children = this.props.children;
        for(let i = 0,l=children.length;i<l;i++){
            const child = children[i];
            const {path,exact} = child.props;
            if(this.match(pathname,path,exact)){
                return child
            }

        }
        return null;
    }
}
複製代碼

Link

• Link的屬性to是字符串或對象。
• Link渲染a標籤，在a標籤上綁定事件，進行跳轉。
• Link的跳轉是用history.push完成的，a的href屬性是history.createHref的返回值。

export default class Link extends Component{
    static propsTypes = {
        to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
    }
    static contextTypes = {
        history:PropTypes.object
    }
    onClickHandle=(e)=>{
        e.preventDefault();
        this.context.history.push(this.href);
    }
    render(){
        const {to} = this.props;
        this.href = this.context.history.createHref(to);
        return (
            <a onClick={this.onClickHandle} href={this.href}>{this.props.children}</a>
        );
    }
}
複製代碼

Redirect

• Redirect跳轉到某個路由，不渲染組件
• 經過history.createHref得到path，history.push跳轉過去

export default class Redirect extends Component{
    static propTypes = {
        to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
    }
    static contextTypes = {
        history: PropTypes.object
    }
    componentDidMount(){
        const href = this.context.history.createHref(this.props.to);
        this.context.history.push(href);
    }
    render(){
        return null;
    }
};
複製代碼

Prompt

• 至關於window.confirm，點擊肯定後跳轉到想要的連接，點擊取消不作操做
• Prompt的屬性when爲true是才觸發confirm

export default class Prompt extends Component {
    static propTypes = {
        when: PropTypes.bool,
        message: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired
    }
    static contextTypes = {
        history: PropTypes.object
    }

    componentWillMount() {
        this.prompt();
    }

    prompt() {
        const {when,message} = this.props;
        if (when){
            this.context.history.block(message);
        }else {
            this.context.history.block(null);
        }
    }

    componentWillReceiveProps(nextProps) {
        this.prompt();
    }
    render() {
        return null;
    }
};
複製代碼

withRouter

• withRouter實際是一個高階組件，即一個函數返回一個組件。返回的組件外層是Route，Route的children屬性裏渲染接收到的組件。

import React from 'react';
import Route from './Route';
const withRouter = Component => {
    const C = (props)=>{
        return (
            <Route children={props=>{
                return (
                    <Component {...props} />
                )
            }}/>
        )
    };
    return C;
};
export default withRouter

複製代碼

總結

react-router、react-router-dom的api還有不少，像Redirect和withRouter還有的許多api。本文的組件只能跑通react-router-dom裏的example。源碼要複雜的多，經過學習源碼，並本身實現相應的功能，能夠對react及react-router有更深的理解，學到許多編程思想，數據結構很重要，像源碼中Router裏的ChildContext的數據解構，子組件屢次用到裏面的方法或屬性，方便複用。

//ChildContext的數據解構
{
    router:{
        history,    //某種 history
        route:{
            location:history.location,
            match:{} //匹配到的結果
        }
    }
}
複製代碼

參考

• 源碼
• react-router
• history