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

71次阅读

共计 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…

正文完
 0