当前位置 博文首页 > lllomh的博客:react-keep-alive 缓存使用
今天来说说,react 的路由缓存,这个在react 中很少有实质性可用的资料!此篇记录一下
demo?请狠狠的戳这里?¥ ?http://download.lllomh.com/cliect/#/product/J804099672377354
demo 请狠狠的戳这里 c? ?https://download.csdn.net/download/lllomh/12684925
?
导入 之后 :
import {
Provider,
KeepAlive,
} from 'react-keep-alive';
在路由阶段包括起来必须在Router 里层
<Router>
<Provider include={['Home','Detaile']}> {/*include ={['Home']} include="a,b" 为组件的弹出名字 匹配就缓存 不写则全部缓存*/}
{/*<Switch>*/}
{/* <Route path='/' exact component={Home}/>*/}
{/* <Route path='/home' exact component={Home}/>*/}
{/* <Route path='/detial' exact component={Detaile}/>*/}
{/*</Switch>*/}
<Switch>
<Route path="/home">
<KeepAlive name="Home">
<Home />
</KeepAlive>
</Route>
<Route path="/detial">
<KeepAlive name="Detaile">
<Detaile />
</KeepAlive>
</Route>
</Switch>
</Provider>
</Router>
<Provider include={['Home','Detaile']}> 参照 官方文档 https://github.com/lllomh/react-keep-alive
代码:
import React, {Component} from "react"
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"
import axios from 'axios'
import {
Provider,
KeepAlive,
} from 'react-keep-alive';
/**路由页面**/
import Home from '../pages/index'
import Detaile from '../pages/detaile'
React.Component.prototype.$axios = axios;
class Routers extends Component {
render() {
return (
<div>
<Router>
<Provider include={['Home','Detaile']}> {/*include ={['Home']} include="a,b" 为组件的弹出名字 匹配就缓存 不写则全部缓存*/}
{/*<Switch>*/}
{/* <Route path='/' exact component={Home}/>*/}
{/* <Route path='/home' exact component={Home}/>*/}
{/* <Route path='/detial' exact component={Detaile}/>*/}
{/*</Switch>*/}
<Switch>
<Route path="/home">
<KeepAlive name="Home">
<Home />
</KeepAlive>
</Route>
<Route path="/detial">
<KeepAlive name="Detaile">
<Detaile />
</KeepAlive>
</Route>
</Switch>
</Provider>
</Router>
</div>
)
}
}
export default Routers
最后强调一点,要返回操作返回到之前的列表的滚动条位置,需要用?
import {createBrowserHistory} from 'history' comeBack=()=>{ const customHistory = createBrowserHistory(); customHistory.goBack(); }
来实现,
"react-keep-alive": "^2.5.2", "react-router-dom": "^5.2.0",
版本中
?react-keep-alive中有2个使用较多的 生命周期:
进入组件页面的时候 触发:
componentDidActivate(){ let home = this.$Tool.getUrlKey("from") this.setState({ isHome:!!home }) }
离开组件页面的时候触发:
componentWillUnactivate(){ console.log(444) }
总体:
componentDidMount(){ console.log('ssssssssssssssssss') this.init() this.getWatch() } componentDidActivate(){ console.log(3333) let home = this.$Tool.getUrlKey("from") this.setState({ isHome:!!home }) } componentWillUnactivate(){ console.log(444) }
?
实际线上案例:
FrontendAuth.jsx
if (targetRouterConfig && !targetRouterConfig.auth && !isLogin) { const { component,name } = targetRouterConfig; let Components = component return <Route exact path={pathname}> <KeepAlive name={name}> <Components/> </KeepAlive> </Route>; }
router/index.jsx?
<Router> <ScrollToTop> <Headers/> <Provider> <Switch> <FrontendAuth routerConfig={routerMap} /> </Switch> </Provider> <Footer/> </ScrollToTop> </Router>
productDetails.jsx
componentDidActivate(){ console.log(3333) let home = this.$Tool.getUrlKey("from") this.setState({ isHome:!!home }) } componentWillUnactivate(){ console.log(444) }
productDetails.jsx resetOrNot=()=>{ this.state.isHome?this.$Tool.comeBack():this.props.history.push('/'); }
最后还是强调重点,这缓存的情况是,只有返回上一步的操作的时候才会定位到原来的滚动条位置,跳转的话,缓存是可以.但滚动位置不会记录.不会再发请求.包括componentWillReceiveProps在内的生命周期都会失效:
只保留 keep-alvie 的生命周期外 shouldComponentUpdate(nextProps,nextState){}、componentDidUpdate(newProps,newState,Snapshot){}
这2个数据生命周期还保留,其他的不执行!
加?Product = bindLifecycle(Product) 的情况下?componentDidUpdate 有效??componentWillReceiveProps不确定,有时有有效,可能有其他原因
componentDidUpdate(prevProps, prevState, snapshot){ console.log(111111) let categoryId = this.$Tool.getUrlKey("categoryId") if(categoryId!=null){ if(categoryId!=this.state.categoryId){ this.init() } } }
这点有点商榷,欢迎大家查证
?
cs
最新 更多<<
lllomh的博客:react-keep-alive 缓存使用 lllomh的博客:nuxt 报Though the “loose“ option was set to lllomh的博客:elementUI 限制上传图片尺寸 lllomh的博客:nodejs对接ueditor编辑器图片上传问题 lllomh的博客:Nuxt.js Unexpected token ‘export‘ lllomh的博客:广州互联网职位下跌到一个奇点后平行 lllomh的博客:vue中Vant的field输入框实现输入内容可见密码 lllomh的博客:Nuxt.js自定义错误页 lllomh的博客:Vue.js Cli 3.0 多页面开发案例解析 lllomh的博客:node+vue实现支付宝支付(沙箱)完整版,亲测可用 计算机随笔:美国留学生活点滴【转】 Linux(CentOS)_小龙狗的博客:PyCharm的AttributeError: module 小龙狗的博客:Win8+CentOS7双系统安装 小龙狗的博客:C++中的ifndef/define/endif的使用 小龙狗的博客:C++中的STL 小龙狗的博客:C++中的迭代器 小龙狗的博客:Linux下Django+MySQL+Nginx 小龙狗的博客:pip install uwsgi安装失败问题的解决 小龙狗的博客:大数据框架初探 小龙狗的博客:Unix环境高级编程中的apue.h配置 小龙狗的博客:几种常见的开源协议介绍 小龙狗的博客:关于浏览器的内核 小龙狗的博客:C语言中的断言 小龙狗的博客:C语言数组的深入解读 小龙狗的博客:深入理解操作系统[3]:进程的控制 小龙狗的博客:深入理解操作系统[5]:线程 小龙狗的博客:深入理解操作系统[6]:处理器调度 小龙狗的博客:深入理解操作系统[7]:死锁 小龙狗的博客:深入理解操作系统[8]:内存管理 小龙狗的博客:C++ 程序编译过程