React-Keeper 前端路由缓存 存储状态（大部分转）

前言

接触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仍是一个比较新的框架，国内外实践的人还比较少。从源码级别看其实现，在前端世界众多而杂乱的开源框架中，算是质量很高的一个。