共计 4374 个字符，预计需要花费 11 分钟才能阅读完成。
前言
接触 react 也有一段时间了，一直在做关于 react 前端架构相关的研究，由于工作性质，有些干货只能自己研究了，今天遇见了一个需求：在做后台管理项目的时候，产品经理提出：从列表页填写查询条件，然后查询出结果，点击某一条结果进入编辑页面，编辑完了之后返回列表页，还想看到之前查询的条件和查询的结果；（目前是返回直接刷新页面，等于查询条件为空）。
那么团队的解决办法是，在跳转到编辑页面的时候，在浏览器打开新的标签（不过结合之前的架构（有点老），这个虽然。。但是也可以解决问题）
接触过 vue 的同学知道 vue 有一个 keep-alive 可以缓存组件状态，在做移动端应用的时候非常方便，提高性能；那么 react 有没有这样一个东西呢？当然有，那就是 React-Keeper 了
github 地址 https://github.com/vifird/rea…
下面就是转载的内容了
了解 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. 灵活的配置
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>
写在最后
读 React-Keeper 源码，发现内部有几点值得 React 开发者借鉴的地方：
可扩展路由的实现方式采用了订阅模式，进行 Route 的集中管理，通过减少监听事件保证了路由管理的效率。
默认使用数据脏检查，避免不必要的渲染。
缓存管理是重要的一个核心功能，React-Keeper 内部集成了两个缓存管理器，并在每次地址变更时对缓存进行清理。
集成了地址匹配缓存以提高匹配的效率。
无状态组件 (Stateless Component) 的管理，使用 react-funtional 库将组件转换为有状态组件的方式。
React-Keeper 还是一个比较新的框架，国内外实践的人还比较少。从源码级别看其实现，在前端世界众多而杂乱的开源框架中，算是质量很高的一个。
附录 Github : https://github.com/vifird/rea…
