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

2024年2月15日 231次阅读 来源: 强子

前言

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

    原文作者：强子
    原文地址: https://segmentfault.com/a/1190000016621746
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞