怎么實現react-router

小編給大家分享一下怎么實現react-router，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、react-router依賴基礎-history

1、History整體介紹

對于history 來說，它是獨立的第三方 js 庫，是可以用來兼容在不同環境和瀏覽器下歷史記錄的管理，而且還擁有統一的 API，在 history中主要分為這幾類：

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

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

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

對于這三個類，在不同的環境中還提供了三個PAI，而且他們有一些相同性質的操作，就是將公共文件 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對于這三個方法他們只是覆蓋了其中的一些方法，值得注意的是，在這個時候的location跟瀏覽器原生的location是不相同的，然而這個最大的區別就在于里面多了key字段，history內部通過key來進行location的操作；代碼如下所示：

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

2、 內部解析

對于我們提及到的三個 API 的實現方法如下：

• createBrowserHistory: 利用 HTML5 里面的 history。

• createHashHistory: 通過 hash 來存儲在不同狀態下的 history 信息。

• createMemoryHistory: 在內存中進行歷史記錄的存儲。

3、 執行URL前進

這三個方法在執行 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;
  }
}

4、 檢測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 });
  }
}

5、  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]
}

二、react-router的基本原理

 我們先來看一張 react-router 原理圖，如下所示：

在這張流程中我們可以知道，在 react-router 中，URL對應Location對象，而UI是由 react components來決定的，這樣就轉變成location與components之間的同步問題。

三、react-router具體實現    

通過上面的知識我們知道，react-router 在 history 這個庫類的基礎上實現URL和UI同步的話分為這另個層次來描述實現的具體步驟：

1、  組件層面描述實現過程 

我們先來看看下面這張流程圖：

在這個流程圖中我們知道最主要的 component 是Router RouterContext Link，對于history庫的話只有起到了中間橋梁的作用。

2、API層面描述實現過程 

我們在 API 這個層次中我們可以通過下面這張流程圖了解，如下所示：

小結：

對于react-router來說目前是比較受歡迎的，而且也在很多的項目中被大量的使用，它的有點可以分為下面幾點：

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

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

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

• 路由配置: 可以通過組件、配置對象來進行路由的配置。

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

• 路由加載: 可以同步記載，也可以異步加載，這樣就可以實現按需加載。

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

當然 react-router 并不是說都沒有缺點，它的缺點就是 API 比較不太穩定。

以上是“怎么實現react-router”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！