目前，react的生態越來越豐富，像flux redux react-router已經被越來越多的使用，本文就react-router的內部實現進行分析。文章主要包含兩大部分: 一是對react-router賴以依存的history進行研究；二是分析react-router是如何實現URL與UI同步的。

1. react-router依賴基礎 - history

1.1 History整體介紹

history是一個獨立的第三方js庫，可以用來相容在不同瀏覽器、不同環境下對歷史記錄的管理，擁有統一的API。具體來說裡面的history分為三類:

• 老瀏覽器的history: 主要通過hash來實現，對應createHashHistory

• 高版本瀏覽器: 通過html5裡面的history，對應createBrowserHistory

• node環境下: 主要儲存在memeory裡面，對應createMemoryHistory

上面針對不同的環境提供了三個API，但是三個API有一些共性的操作，將其抽象了一個公共的檔案createHistory:

// 內部的抽象實現
function createHistory(options={}) {
  ...
  return {
    listenBefore, // 內部的hook機制，可以在location發生變化前執行某些行為，AOP的實現
    listen, // location發生改變時觸發回撥
 

    transitionTo, // 執行location的改變
    push, // 改變location
    replace,
    go,
    goBack,
    goForward,
    createKey, // 建立location的key，用於唯一標示該location，是隨機生成的
    createPath,
    createHref,
    createLocation, // 建立location
  }
}

上述這些方式是history內部最基礎的方法，createHashHistory、createBrowserHistory、createMemoryHistory

function createLocation() {
  return {
    pathname, // url的基本路徑
    search, // 查詢欄位
    hash, // url中的hash值
    state, // url對應的state欄位
    action, // 分為 push、replace、pop三種
    key // 生成方法為: Math.random().toString(36).substr(2, length)
  }
}

1.2 內部解析

三個API的大致的技術實現如下:

• createBrowserHistory: 利用HTML5裡面的history

• createHashHistory: 通過hash來儲存在不同狀態下的history資訊

• createMemoryHistory: 在記憶體中進行歷史記錄的儲存

1.2.1 執行URL前進

• createBrowserHistory: pushState、replaceState

• createHashHistory: location.hash=*** location.replace()

• createMemoryHistory: 在記憶體中進行歷史記錄的儲存

虛擬碼實現如下:

// createBrowserHistory(HTML5)中的前進實現
function finishTransition(location) {
  ...
  const historyState = { key };
  ...
  if (location.action === 'PUSH') ) {
    window.history.pushState(historyState, null, path);
  } else {
    window.history.replaceState(historyState, null, path)
  }
}
// createHashHistory的內部實現
function finishTransition(location) {
  ...
  if (location.action === 'PUSH') ) {
    window.location.hash = path;
  } else {
    window.location.replace(
    window.location.pathname + window.location.search + '#' + path
  );
  }
}
// createMemoryHistory的內部實現
entries = [];
function finishTransition(location) {
  ...
  switch (location.action) {
    case 'PUSH':
      entries.push(location);
      break;
    case 'REPLACE':
      entries[current] = location;
      break;
  }
}

1.2.2 檢測URL回退

• createBrowserHistory: popstate

• createHashHistory: hashchange

• createMemoryHistory: 因為是在記憶體中操作，跟瀏覽器沒有關係，不涉及UI層面的事情，所以可以直接進行歷史資訊的回退

虛擬碼實現如下:

// createBrowserHistory(HTML5)中的後退檢測
function startPopStateListener({ transitionTo }) {
  function popStateListener(event) {
    ...
    transitionTo( getCurrentLocation(event.state) );
  }
  addEventListener(window, 'popstate', popStateListener);
  ...
}

// createHashHistory的後退檢測
function startPopStateListener({ transitionTo }) {
  function hashChangeListener(event) {
    ...
    transitionTo( getCurrentLocation(event.state) );
  }
  addEventListener(window, 'hashchange', hashChangeListener);
  ...
}
// createMemoryHistory的內部實現
function go(n) {
  if (n) {
    ...
    current += n;
  const currentLocation = getCurrentLocation();
  // change action to POP
  history.transitionTo({ ...currentLocation, action: POP });
  }
}

1.2.3 state的儲存

為了維護state的狀態，將其儲存在sessionStorage裡面:

// createBrowserHistory/createHashHistory中state的儲存
function saveState(key, state) {
  ...
  window.sessionStorage.setItem(createKey(key), JSON.stringify(state));
}
function readState(key) {
  ...
  json = window.sessionStorage.getItem(createKey(key));
  return JSON.parse(json);
}
// createMemoryHistory僅僅在記憶體中，所以操作比較簡單
const storage = createStateStorage(entries); // storage = {entry.key: entry.state}

function saveState(key, state) {
  storage[key] = state
}
function readState(key) {
  return storage[key]
}

2. react-router的基本原理

一句話：實現URL與UI介面的同步。其中在react-router中，URL對應Location物件，而UI是由react components來決定的，這樣就轉變成location與components之間的同步問題。

3. react-router具體實現

react-router在history庫的基礎上，實現了URL與UI的同步，分為兩個層次來描述具體的實現。

3.1 元件層面描述實現過程

在react-router中最主要的component是Router RouterContext Link，history庫起到了中間橋樑的作用。

3.2 API層面描述實現過程

為了簡單說明，只描述使用browserHistory的實現，hashHistory的實現過程是類似的，就不在說明。

4. 結語

目前react-router在專案中已有大量實踐，其優點可以總結如下:

• 風格: 與React融為一體,專為react量身打造，編碼風格與react保持一致，例如路由的配置可以通過component來實現

• 簡單: 不需要手工維護路由state，使程式碼變得簡單

• 強大: 強大的路由管理機制，體現在如下方面

  • 路由配置: 可以通過元件、配置物件來進行路由的配置

  • 路由切換: 可以通過<Link> Redirect進行路由的切換

  • 路由載入: 可以同步記載，也可以非同步載入，這樣就可以實現按需載入

• 使用方式: 不僅可以在瀏覽器端的使用，而且可以在伺服器端的使用

當然react-router的缺點就是API不太穩定，在升級版本的時候需要進行程式碼變動。