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

時間 2019-11-10

標籤 react keeper 前端路由緩存存儲狀態大部分欄目 React 简体版

原文原文鏈接

前言

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

接觸過vue的同窗知道 vue有一個keep-alive能夠緩存組件狀態，在作移動端應用的時候很是方便，提升性能；那麼react有沒有這樣一個東西呢？固然有，那就是React-Keeper了vue

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

更新

項目實踐

使用React-Keeper仍是要慎重，react-keeper加上會出現兩個問題：1.狀態緩存了，若是不少頁面都是列表，這表明每一個頁面都有緩存數據，下次進入頁面的時候會展現離開時的狀態，那麼緩存的數據量也很多，會佔用瀏覽器內存，性能確定會有影響，何時清除是個問題。插件提供了cache='parent'爲父組件緩存，在父組件不解綁的狀況下會維持緩存狀態。那麼要解決的話就要有個父組件，若是父組件是最外層組件，不會解除，那麼就要改變路由了，但插件並無提供手動消除緩存的方式，使用起來很不靈活，並且會與router3 link有些不一樣，總之挺麻煩的。2.樣式問題，頁面回來時，有些樣式會缺失，利用生命週期能夠解決，但componentDidMount不會執行，componentWillUpdate、render和 componentDidUpdate，若是你在這些週期裏面改變數據狀態，那麼組件週期將一直循環下去，瀏覽器性能大受影響！git

下面就是轉載的內容了

瞭解React的同窗必定了解React-Router，這個幾乎是React單頁面應用必備的路由框架。若是有足夠多的開發經驗，你必定會發現React-Router的不少問題，好比：沒有頁面緩存、不能傳遞屬性、脫離JSX的動態加載和過濾器實現等，這些問題尤爲在移動端表現問題更多。github

這裏咱們來推薦一款更強大的React路由器：React-Keeper，一個比React-Router更靈活、更適用於移動端、路由功能更健壯的框架，React-Keeper除了基礎功能更強大之外，特別對移動APP的路由作了加強，可以知足更豐富的移動端場景。ajax

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

特性介紹

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.靈活的配置

React-Keeper的Route組件支持自定義屬性，並會將全部自定義的屬性傳遞給要渲染的組件。
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>