React-Keeper 前端路由快取 儲存狀態（大部分轉）

強子發表於2018-10-09
React前端路由快取

前言

接觸react也有一段時間了，一直在做關於react前端架構相關的研究，今天遇見了一個需求：在做後臺管理專案的時候，產品經理提出：從列表頁填寫查詢條件，然後查詢出結果，點選某一條結果進入編輯頁面，編輯完了之後返回列表頁，還想看到之前查詢的條件和查詢的結果；（目前是返回直接重新整理頁面，等於查詢條件為空）。

接觸過vue的同學知道 vue有一個keep-alive可以快取元件狀態，在做移動端應用的時候非常方便，提高效能；那麼react有沒有這樣一個東西呢？當然有，那就是React-Keeper了

github地址 https://github.com/vifird/rea…

更新

專案實踐

使用React-Keeper還是要慎重，react-keeper加上會出現兩個問題：1.狀態快取了，如果很多頁面都是列表，這代表每個頁面都有快取資料，下次進入頁面的時候會展示離開時的狀態，那麼快取的資料量也不少，會佔用瀏覽器記憶體，效能肯定會有影響，什麼時候清除是個問題。外掛提供了cache=`parent`為父元件快取，在父元件不解綁的情況下會維持快取狀態。那麼要解決的話就要有個父元件，如果父元件是最外層元件，不會解除，那麼就要改變路由了，但外掛並沒有提供手動消除快取的方式，使用起來很不靈活，而且會與router3 link有些不同，總之挺麻煩的。2.樣式問題，頁面回來時，有些樣式會缺失，利用生命週期可以解決，但componentDidMount不會執行，componentWillUpdate、render和 componentDidUpdate，如果你在這些週期裡面改變資料狀態，那麼元件週期將一直迴圈下去，瀏覽器效能大受影響！

下面就是轉載的內容了

瞭解React的同學一定了解React-Router，這個幾乎是React單頁面應用必備的路由框架。如果有足夠多的開發經驗，你一定會發現React-Router的很多問題，比如：沒有頁面快取、不能傳遞屬性、脫離JSX的動態載入和過濾器實現等，這些問題尤其在移動端表現問題更多。

這裡我們來推薦一款更強大的React路由器：React-Keeper，一個比React-Router更靈活、更適用於移動端、路由功能更健壯的框架，React-Keeper除了基礎功能更強大以外，特別對移動APP的路由做了增強，能夠滿足更豐富的移動端場景。

React-Keeper吸收了React-Router的思想，使用方式與React-Router相似度很大，都提供了Route元件和Link元件，基本可以實現React-Router的平滑遷移。React-Keeper的基礎教程，可以參考其Github ： Github [React-Keeper]，這裡我重點介紹一下React-Keeper的特性。

特性介紹

1.可擴充套件路由

允許你在任何時間、任何元件內新增路由配置。如下面：我們可以在路由匹配的的元件Products中再新增路由元件。這種特性，對團隊合作開發很友好，可以讓路由配置也按模組化的切分；也非常適用於有動態載入需求的大型網站。（這個特性在React-Router最新版中也已經得到了支援）

const App = ()=> {
    return (
      <HashRouter>
        <div>
          <Route component={ Home } path="/"/>
          <Route component={ Products } path="/products"/>
        </div>
      </HashRouter>
    )
  }
 
  const Products = ()=> {
    return (
      <div>
        <Route component={ ScienceProducts } path="/sci" />
        <Route component={ DailiUseProducts } path="/dai" />
      </div>
    )
  }
 
  ReactDOM.render(<App/>, document.getElementById(`root`))

2.頁面快取

在移動開發中，我們經常會遇到這樣的場景：在一個列表頁瀏覽了很久，點選一項進入詳情頁，然後再返回到列表頁，這時候我們希望列表頁能保留在之前的狀態（滾動位置、臨時操作等），React-Router無法解決這個問題，在返回後列表頁的DOM要重新載入，所以我們不得不重新手動找回之前的狀態（滾動到之前的位置）。

這裡我們需要一個頁面快取機制來解決這個問題。所謂頁面快取，即當地址與路由不匹配時，自動快取頁面的狀態，當匹配時，再對頁面進行還原。

頁面快取是React-Keeper的一個重要特性，其內部整合了快取管理器，可以對路由元件的繫結與解綁進行代理，從而實現了頁面快取。React-Keeper提供了3種頁面快取方式，下面我們來分別進行介紹。

2.1 cache屬性

所有新增了cache屬性的路由元件，React-Keeper快取管理器都會頁面進行代理。在下面的示例中，Home、AboutUs頁面會使用快取代理：

class App extends React.Component {
 
  render() {
 
    return (
      <HashRouter>
        <div>
          <Route cache component={Home} path=`/`/>
 
          <Route component={Host} path=`/host` />
 
          <Route cache=`parent` path=`/aboutus` component={AboutUs}/>
 
        </div>
      </HashRouter>
    )
  }
}
 
ReactDOM.render(<App/>, document.getElementById(`root`))

cache屬性可以新增屬性值，React-Keeper支援的屬性值有root（default）、parent。

cache=`root`（或cache）為永久快取，只要根元件不解綁，頁面將永久快取。

cache=`parent`為父元件快取，在父元件不解綁的情況下會維持快取狀態。

2.2 CacheLink元件

React-Keeper額外提供了CacheLink元件，繼承自Link，故有Link元件的所有特性，此外，其內部對接了快取管理器，可以對連結跳轉環節進行代理。

CacheLink快取為臨時快取，當使用其新開啟頁面時，快取管理器會臨時快取連結的來源頁面，當返回時至之前頁面（或路由狀態變更）時，提取快取頁面以展示，並清除快取。

這種特性適用於非常用列表頁的快取，使用方式如下：
<ul className=`nav navbar-nav`>
<li>

<Link to=`/`>Home</Link>

</li>
<li>

<CacheLink to=`/product/ASDFADF`>Detail</CacheLink>

</li>
</ul>

3.標籤化過濾器

在React-Keeper中，我們可以為每一個Route元件單獨定義多個過濾器，當過濾器驗證通過後才能進行下面的操作，Route支援兩類過濾器：繫結過濾器、解綁過濾器。

過濾器的使用場景，最常用的應該就是登入驗證，對於某些需要登入後才能訪問的資源，我們希望登入檢測通過後再進行頁面繫結，而不是先跳轉頁面再進行驗證。下面是React-Keeper官網登入過濾的示例程式碼：

// Define a fllter, and run over it or not.
 
// receive `props`
const loginFilter = (callback, props)=> {
  
  if(!props.host) {
 
    // dynamicly request data (use jQuery ajax)
    $.ajax({
      url: `host/login.do`,
      data: {},
      succeed: function(data){
        if(data.host){
 
          // run `callback` function to enter next step (render component or next filter)
          callback()            
        }
      },
      error: function(){
 
      },
      dataType: `json`
    })
  }
}
 
// Added to Route Component
// Single Filter
<HashRouter>
  <Route path=`/user` component={User}, enterFilter={ loginFilter } />
</HashRouter>
 
// Multiple Filters
<HashRouter>
  <Route path=`/user` component={User}, enterFilter={[ loginFilter, permitFilter1, permitFilter2 ] } />
</HashRouter>

4.標籤化動態載入

React-Keeper支援動態元件載入，而動態載入使用方式也是非常簡單，可以直接在Route元件行進行操作。使用方式如下：

<Route loadComponent={ (callback)=>{
  System.import(`../Products.js`).then((Products)=>{
      callback(Products)
    })
  } } path=`/products`>

在React-Keeper的內部處理中，當path匹配的時候，才會進行檔案的載入，這對於大型的WEB應用無疑是非常必要的。

注意：過濾器的執行，在動態檔案載入之後。

5.靈活的配置

  1. React-Keeper的Route元件支援自定義屬性，並會將所有自定義的屬性傳遞給要渲染的元件。

  2. React-Keeper的配置相當靈活，可以全部採用元件屬性化的配置，比如index、cache、miss等，以下是Route元件所有的保留詞：

    index : 入口元件

    miss : 地址不匹配時渲染的元件

    cache : 快取標記

    redirect : 重定向地址 (當元件滿足渲染條件時才會執行)

    path : 匹配地址規則

    component ：要匹配的元件

    loadComponent : 動態載入元件

    enterFilter : 掛載過濾器

    leaveFilter : 解除安裝過濾器

    offDirtyCheck : 關閉髒檢查。React-Keep會預設啟用髒檢查，以避免地址變更時不必要的渲染

    <HashRouter>
    <div>

    <Route index component={Home} path=`/`/>

<Route cache component={Host} path=`/host` />

<Route miss path=`/aboutus` component={AboutUs}/>

<Route path=`/other` redirect=`/redirect`/>

    </div>
    </HashRouter>

寫在最後

讀React-Keeper原始碼，發現內部有幾點值得React開發者借鑑的地方：

  1. 可擴充套件路由的實現方式採用了訂閱模式，進行Route的集中管理，通過減少監聽事件保證了路由管理的效率。
  2. 預設使用資料髒檢查，避免不必要的渲染。
  3. 快取管理是重要的一個核心功能，React-Keeper內部整合了兩個快取管理器，並在每次地址變更時對快取進行清理。
  4. 整合了地址匹配快取以提高匹配的效率。
  5. 無狀態元件(Stateless Component)的管理，使用react-funtional庫將元件轉換為有狀態元件的方式。

React-Keeper還是一個比較新的框架，國內外實踐的人還比較少。從原始碼級別看其實現，在前端世界眾多而雜亂的開源框架中，算是質量很高的一個。

相關文章