怎么使用react-mile米乐体育

"react-activation":"^0.10.2",

constroutes=[...{name:'商品管理（商城商品）',path:'/web/supplier/goods/mallgoodsmgr',component:'./supplier/goods/goodsmanage',meta:{keepalive:{topath:'/web/supplier/goods/mallgoodsmgr/detail',//只有去详情页的时候才需要缓存商品管理（商城商品）这个路由},},}...]

importkeepalive,{alivescope,usealivecontroller}from'react-activation'//tree扁平化functiontreetolist(tree,childrenkey='routes'){varqueen=[]varout=[]queen=queen.concat(tree)while(queen.length){varfirst=queen.shift()if(first[childrenkey]){queen=queen.concat(first[childrenkey])deletefirst[childrenkey]}out.push(first)}returnout}//从routes路由tree里，拿到所有meta.keepalive的路由：keepaliveroutesconstallflatroutes=treetolist(routes)//所有路由constkeepaliveroutes=allflatroutes.filter((item)=>item.meta?.keepalive)//keepalive的路由functionindex(props){constlocation=uselocation()constrouteitem=keepaliveroutes.find((item)=>item.path==location.pathname)//from页面letdom=props.childrenif(routeitem){dom={props.children}//id一定要加否则keepalive的页面跳转另一个keepalive的页面会有问题}return({dom}

constglobalmodel={namespace:'global',state:{/***keepalive*/topath:'',keepaliveoptions:{},//给keepalive的页面传的options},effects:{},reducers:{save(state,{payload}){return{...state,...payload,}},settopath(state,{payload}){return{...state,topath:payload,}},},subscriptions:{setup({history,dispatch}){//subscribehistory(url)change,trigger`load`actionifpathnameis`/`history.listen((route,typestr)=>{const{pathname}=routedispatch({type:'settopath',payload:pathname,})})},},}

...functionindex(props){constlocation=uselocation()consttopath=props.global.topath//从dva中拿到将要访问的页面constrouteitem=keepaliveroutes.find((item)=>item.path==location.pathname)//from页面///新加代码///新加代码///新加代码useeffect(()=>{console.log('topath改变',topath)//from页面是需要keepalive的页面if(routeitem){console.log('from页面是需要keepalive的页面',routeitem)if(topath==routeitem.meta?.keepalive.topath){//所去的页面正好是当前这个路由的keepalive.topathconsole.log('所去的页面正好是当前这个路由的keepalive.topath，不做什么')}else{console.log('clear')if(alivecontroller?.clear){alivecontroller.clear()}}}},[topath])///新加代码endletdom=props.childrenif(routeitem){dom={props.children}//id一定要加否则keepalive的页面跳转另一个keepalive的页面会有问题}return({dom}

4.4 优化

现在有一个问题：从列表a跳转详情页，然后跳转列表b，再跳转列表a的时候，a是不刷新的：
列表a => 详情页 => 列表b => 列表a 此时列表a不刷新或者空白。
因为从详情页出来（跳转列表b）的时候，我们没有清空列表a的缓存。
所以要检查当前页面是否是某个需要keepalive页面的topath页面

根组件：

functionindex(){...constparentitem=keepaliveroutes.find((item)=>item.meta?.keepalive?.topath==location.pathname)//parentitem存在表示当前页面是某个keepalive的页面的topathuseeffect(()=>{console.log('topath改变',topath)...///新加代码///新加代码///新加代码//from页面是某个keepalive的页面的topathif(parentitem){console.log('from页面是某个keepalive的页面的topath，parentitem',parentitem)if(topath==parentitem.path){//所去的页面是parentitem.pathconsole.log('所去的页面是parentitem.path，不做什么')}else{console.log('clear')if(alivecontroller?.clear){alivecontroller.clear()}}}},[topath])...}

5、抽离逻辑到自定义hooks

usekeepalivelayout.js

import{useeffect}from'react'import{uselocation}from'react-router-dom'importkeepalive,{alivescope,usealivecontroller}from'react-activation'importroutesfrom'../../config/router.config'//tree扁平化functiontreetolist(tree,childrenkey='routes'){varqueen=[]varout=[]queen=queen.concat(tree)while(queen.length){varfirst=queen.shift()if(first[childrenkey]){queen=queen.concat(first[childrenkey])deletefirst[childrenkey]}out.push(first)}returnout}constallflatroutes=treetolist(routes)//所有路由constkeepaliveroutes=allflatroutes.filter((item)=>item.meta?.keepalive)//keepalive的路由functionindex(props){constlocation=uselocation()//keepaliveconstalivecontroller=usealivecontroller()consttopath=props.global.topath//将要访问的页面constrouteitem=keepaliveroutes.find((item)=>item.path==location.pathname)//from页面constparentitem=keepaliveroutes.find((item)=>item.meta?.keepalive?.topath==location.pathname)useeffect(()=>{console.log('topath改变',topath)//from页面是需要keepalive的页面if(routeitem){console.log('from页面是需要keepalive的页面',routeitem)if(topath==routeitem.meta?.keepalive.topath){//所去的页面正好是当前这个路由的keepalive.topathconsole.log('所去的页面正好是当前这个路由的keepalive.topath，不做什么')}else{console.log('clear')if(alivecontroller?.clear){alivecontroller.clear()}}}//from页面是某个keepalive的页面的topathif(parentitem){console.log('from页面是某个keepalive的页面的topath，parentitem',parentitem)if(topath==parentitem.path){//所去的页面是parentitem.pathconsole.log('所去的页面是parentitem.path，不做什么')}else{console.log('clear')if(alivecontroller?.clear){alivecontroller.clear()}}}},[topath])return{fromisneedkeepalive:routeitem,}}exportdefaultindex

根组件只需要引入这个hooks就可以了:

functionindex(props){constlocation=uselocation()const{fromisneedkeepalive}=usekeepalivelayout(props)//关键代码关键代码关键代码letdom=props.childrenif(fromisneedkeepalive){dom={props.children}//id一定要加否则keepalive的页面跳转另一个keepalive的页面会有问题}return({dom})}

6、 从详情页返回列表页的时候，控制列表页是否刷新，即返回传参

现在只剩下这最后一个问题了，其实就是keepalive的页面，goback传参的问题

思路：

• 状态管理中增加一个keepaliveoptions对象，这就是详情页给列表页传的参数

• 详情页执行goback的时候，调用状态管理dispatch修改keepaliveoptions

• 列表页监听keepaliveoptions，如果keepaliveoptions改变就执行传入的方法

usekeepaliveoptions.js

import{useeffect}from'react'import{usedispatch,usestore}from'dva'import{router}from'umi'/***@descriptionkeepalive的页面，当有参数传过来的时候，可以用这个监听到*@param{(options:object)=>void}func*/exportfunctionusekeepalivepageshow(func){constdispatch=usedispatch()conststore=usestore()conststate=store.getstate()constoptions=state.global.keepaliveoptions??{}useeffect(()=>{func(options)//执行return()=>{console.log('keepalive页面的缓存卸载')dispatch({type:'global/save',payload:{keepaliveoptions:{},},})}},[json.stringify(options)])}/***@descriptionpagea（keepalive的页面）去了pageb，当从pagebgoback，想要给pagea传参的时候，需要使用这个方法*@returns{(params:object)=>void}*/exportfunctionusekeepalivegoback(){constdispatch=usedispatch()functiongoback(parmas={}){dispatch({type:'global/save',payload:{keepaliveoptions:parmas,},})router.goback()}returngoback}

使用：

详情页

import{usekeepalivegoback}from'@/hooks/usekeepaliveoptions'functionindex(){...constkeepalivegoback=usekeepalivegoback()//用于给上一页keepalive的页面传参...return(<>...{keepalivegoback({isaddsuccess:true})//给列表页传options}>...)}

列表页

import{usekeepalivepageshow}from'@/hooks/usekeepaliveoptions'functionindex(){...//options:isaddsuccessiseditsuccessusekeepalivepageshow((options)=>{console.log('keepaliveoptions',options)if(options.isaddsuccess){//新建成功//列表页码变为1并且刷新search()}elseif(options.iseditsuccess){//编辑成功//列表页码不变并且刷新getdata()}})...return<>...}

到此，关于“怎么使用react-activation实现keepalive支持返回传参”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！