摘要：前端路由庫的作用是改變地址欄，支持瀏覽器前進后退，并同步路由對應(yīng)的視圖，這里以及其依賴的庫說一下路由機制原文地址前提首先簡單介紹一下前端路由機制所依賴的事件及對應(yīng)的事件對于支持新增方法的瀏覽器，可以通過設(shè)置來在瀏覽器棧中新增一條記錄設(shè)置時

前端路由庫的作用是改變地址欄，支持瀏覽器前進、后退，并同步路由對應(yīng)的視圖，這里以react-router及其依賴的history庫說一下路由機制

原文地址

首先簡單介紹一下前端路由機制所依賴的pushState、popstate事件、hash及對應(yīng)的hashChange事件

pushState,popstate

對于支持html5 新增pushState、replaceState方法的瀏覽器，可以通過設(shè)置pushState來在瀏覽器history棧中新增一條記錄

設(shè)置pushState(),replaceState()時并不會觸發(fā)popstate事件，popstate事件只在點擊瀏覽器前進、后退按鈕或調(diào)用history.back()、history.forward()等時觸發(fā)

pushState()方法第一個參數(shù)可以指定一個state對象，并通過history.state或popstate事件回調(diào)中event對象獲取

history.pushState(state,title,path)

console.log(history.state)

window.addEventListener("popstate",(e)=>{

    console.log(e.state)

})

location.hash hashChange

對于不支持pushState方法的瀏覽器，可以通過改變location.hash和借助hashChange事件來實現(xiàn)路由功能

window.addEventListener("hashchange",e=>{

})

location.hash="test"

對比

通過設(shè)置history.pushState(state,title,path),可以給對應(yīng)路由設(shè)置一個state,這就給路由之間的數(shù)據(jù)傳遞提供了一種新途徑，并且，state對象是保存在本地的，刷新頁面依然存在，但通過hash方式實現(xiàn)的路由就沒法使用，react-router v4版本也去除了對state的模擬

history庫提供了三種不同的方法來創(chuàng)建history對象，這里的history對象是對瀏覽器內(nèi)置window.history方法的擴展,擴展了push,go,goBack,goForward等方法，并加入了location、listen字段，并對非瀏覽器環(huán)境實現(xiàn)polyfill

createBrowserHistory()
createHashHistory()
createMemoryHistory()

react-router路由實現(xiàn)大體過程

調(diào)用history.push跳轉(zhuǎn)路由時，內(nèi)部執(zhí)行window.history.pushState在瀏覽器history棧中新增一條記錄，改變url，執(zhí)行組件注冊的回調(diào)函數(shù)，

createBrowserHistory中注冊popstate事件，用戶點擊瀏覽器前進、回退時，在popstate事件中獲取當(dāng)前的event.state，重新組裝一個location,執(zhí)行組件注冊的回調(diào)函數(shù)

history庫對外暴露createBrowserHistory方法，react-router中實例化createBrowserHistory方法對象，在組件中注冊history.listen()回調(diào)函數(shù)，當(dāng)路由有變化時,組件中匹配location,同步UI

分別來看

在react中，我們可以調(diào)用history.push(path,state)來跳轉(zhuǎn)路由，實際執(zhí)行的就是createBrowserHistory中的push方法

在這個方法中主要做三件事

根據(jù)傳遞的path，state參數(shù)創(chuàng)建一個location,不同于window.location,這里的location只有這些屬性

   location= {
      path:
      search:
      hash:
      state:
      key
    };
    const location = createLocation(path, state, createKey(), history.location);

這個location會在和組件中使用，來根據(jù)location中的值和中的path匹配，匹配成功的Route組件渲染指定的component

執(zhí)行g(shù)lobalHistory.pushState({ key, state }, null, href);

執(zhí)行Router中注冊的listener

const action = "PUSH"
setState({ action, location });

const setState = nextState => {
    Object.assign(history, nextState);

    history.length = globalHistory.length;

    transitionManager.notifyListeners(history.location, history.action);
};

popstate事件觸發(fā)時，可以得到event.state，createBrowserHistory中會根據(jù)這個state和當(dāng)前window.location重新生成一個location對象，執(zhí)行Router組件注冊的listener，同步UI

const setState = nextState => {
    Object.assign(history, nextState);

    history.length = globalHistory.length;

    transitionManager.notifyListeners(history.location, history.action);
  };

const handlePop = location => {
    const action = "POP";
    setState({action,location)
}

BrowserRouter組件中會實例化一個createBrowserHistory對象，傳遞給Router組件

class BrowserRouter extends React.Component{

    history = createHistory(this.props);

    render() {
        return ;
    }

}

在Router組件中要注冊history.listen()的一個監(jiān)聽函數(shù)，并且保存一份子組件（Route）使用的數(shù)據(jù)

getChildContext() {
    return {
      router: {
        ...this.context.router,
        history: this.props.history,
        route: {
          location: this.props.history.location, //history中的location
          match: this.state.match
        }
      }
    };
  }
componentWillMount{
    this.unlisten = history.listen(() => {
        this.setState({
            match: this.computeMatch(history.location.pathname)
        });
    });
}

當(dāng)調(diào)用history.push或觸發(fā)popstate事件時，這里注冊的listener都會被createBrowserHistory執(zhí)行，觸發(fā)setState,然后Router的子組件中匹配的會重新渲染，

在Route中有一個match狀態(tài),在父組件props發(fā)生變化時會重新計算

state = {
    match: this.computeMatch(this.props, this.context.router)
  };

componentWillReceiveProps(nextProps, nextContext) {
    this.setState({
      match: this.computeMatch(nextProps, nextContext.router)
    });
}
//computeMatch主要工作就是匹配當(dāng)前組件上指定的path和當(dāng)前瀏覽器的路徑是否一致，一致就渲染組件

render() {

    if (component) return match ? React.createElement(component, props) : null;

    if (render) return match ? render(props) : null;

}

總結(jié)一下，react-router的路由機制就是

借助history庫，history中實現(xiàn)了push，go,goBack等方法，注冊了popstate事件，當(dāng)路由跳轉(zhuǎn)時，使用瀏覽器內(nèi)置的history api 操作 history棧

history庫對外暴露的history對象提供了listen方法，組件會注冊一個listener

當(dāng)調(diào)用hsitory.push或popstate事件觸發(fā)時，執(zhí)行l(wèi)istener

注冊的監(jiān)聽函數(shù)內(nèi)部會setState更新狀態(tài)

的子組件的componentWillReceiveProps生命周期函數(shù)中能得到Router中context,根據(jù)當(dāng)前path和瀏覽器當(dāng)前l(fā)ocation來判斷當(dāng)前route是否match，匹配就渲染component

雖然本文以react-router來介紹路由機制，但主流路由庫實現(xiàn)原理都差不多，借助pushState或hash來更新url,在對應(yīng)的事件處理函數(shù)中來做視圖的同步

參考

createBrowserHistory.js

locationUtil.js

BrowserRouter.js

Router.js

Route.js