React的keepAlive路由缓存的一种实现思路
最近遇到了就是离开当前页面后,返回该页面时,需要保留离开前的状态,对于这种情况,首先是有几种思路
- 将该页面的状态全部存入到
sessionSotrage
中,等到回来时,再从页面中去取。 - 将页面的数据全部存入到
redux
中,再通过mapStateToProps
,通过connect
的方式引入该页面。 - 想办法实现一种类似
vue
的keep-alive
的功能。 - 重写Route组件,在其内部实现该逻辑
这里由于前面两种方法实现起来都比较容易,就不多讲,主要看看第三种思路可以如何去实现
- 首先,我这种实现思路是基于
react-router
带路由的项目。 - 由于
switch
会导致没有匹配的路由不会被渲染,所以需要将keep-alive
的路由放到switch
外面。 - 然后我们可以看到
Route
的组件内部是可以只传一个children
的方法的。......Route的render方法中的部分代码,我们可以看到不管`match`有没有匹配到,当`children`为一个方法的时候,都会去执行`children`方法。 if (component) return match ? React.createElement(component, props) : null; if (render) return match ? render(props) : null; if (typeof children === "function") return children(props); if (children && !isEmptyChildren(children)) return React.Children.only(children); return null;
- 所以我们在使用Route时,可以分两种情况来使用
// 当不需要进行缓存的时候 <Route path={path} component={component} /> // 当需要进行缓存的时候 <Route path={path} children={props => this.renderChildren(props)} /> renderChildren = (props) => { const { match } = props; return ( <div absolute', zIndex: -10 } }> // 如果匹配到了就直接渲染出来,如果没有匹配到,就直接隐藏掉该组件,但是此时组件是不会销毁的,这样就能保证在返回后页面状态的保留 <Component /> // 这个就是该路由下对应的组件 </div> ) }
针对于这种实现思路,我目前想到的还是比较简单,如果遇到比较复杂的情况可能就不是很好处理,针对于各自的特殊业务,应该加上自己相关的处理。我这个仅仅是抛砖引玉,希望大家自己都能有自己的实现思路。
关于react
的路由,之前遇到过一个比较基础的问题,就是react-router
升级到4.0版本之后,就不支持Route
下面套Route
了,所以只能在公共的父级页面再去遍历渲染它的子路由,在这里也稍微记一下。还有就是关于全局页面的search参数问题,可以直接把渲染子路由的方法抽离出来,然后在里面把search
参数处理成对象之后直接传给路由对应的组件来使用,可以节省大多数页面的search
参数的处理,简化代码。
- 上一篇 »Linux内核之 页高速缓存与页回写
- 下一篇 »PHP中插件机制的一种实现方案