React router cache route實(shí)現(xiàn)緩存頁(yè)面流程介紹
一、背景
在開(kāi)發(fā)中,從A頁(yè)面跳轉(zhuǎn)到other頁(yè)面,再返回A頁(yè)面時(shí)react-router會(huì)直接刷新頁(yè)面,導(dǎo)致A頁(yè)面中已加載的海量數(shù)據(jù)狀態(tài)丟失,需要重新加載,用戶體驗(yàn)不佳,所以必須將海量數(shù)據(jù)狀態(tài)進(jìn)行緩存。
(在小編的實(shí)際場(chǎng)景中,A頁(yè)面是一堆模型&業(yè)務(wù)數(shù)據(jù)標(biāo)注點(diǎn),由于模型永遠(yuǎn)不會(huì)更改,但是加載又很緩慢,因此,希望從other頁(yè)面返回A頁(yè)面時(shí),模型不會(huì)重新加載,但是需要更新業(yè)務(wù)數(shù)據(jù)。)
(其他應(yīng)用場(chǎng)景舉例:開(kāi)發(fā)中有從詳情頁(yè)返回列表頁(yè)的需求,這樣一來(lái)頁(yè)面返回后使用react-router會(huì)直接刷新頁(yè)面,導(dǎo)致頁(yè)面中的分頁(yè)和搜索條件全部丟失,用戶體驗(yàn)不佳,所以就必須將列表頁(yè)的狀態(tài)進(jìn)行緩存。)
二、參考方法
網(wǎng)上搜索大概有幾種方法:
1、使用localStorage/sessionStorage進(jìn)行頁(yè)面的狀態(tài)的保存,跳轉(zhuǎn)頁(yè)面后再進(jìn)行獲取,這種方法雖然可行,但是從根本來(lái)說(shuō)還是從新向后臺(tái)再一次請(qǐng)求了數(shù)據(jù),不算最佳方案。
2、react-activation,嘗試未果
3、react-kepper,需要將項(xiàng)目的react-router替換掉,風(fēng)險(xiǎn)較大,慎用
4、react-router-cache-route,簡(jiǎn)單易用,最佳方案
三、react-router-cache-route的使用
就是把Switch替換成CacheSwitch,因?yàn)橐驗(yàn)镾witch組件只保留第一個(gè)匹配狀態(tài)的路由,卸載掉其他路由
把Route替換成CacheRoute
注意:other面回退A頁(yè)面時(shí)使用this.props.history.push(‘’路徑’)可以實(shí)現(xiàn)頁(yè)面的緩存
但當(dāng)使用this.props.history.go(-1)則緩存失敗
四、具體步驟
1、替換Switch和Route
靜態(tài)路由
import React,{Component} from 'react' import { Route} from 'react-router-dom' import {CacheRoute,CacheSwitch} from 'react-router-cache-route' import PageA from './demo/PageA.js' import PageB from './demo/PageB.js' import PageOther from './demo/PageOther.js' class App extends Component{ render(){ return( <div className='App'> <CacheSwitch> <CacheRoute exact path='/platform/PageA' component={PageA}/> <Route path='/platform/PageB' component={PageB}/> <Route path='/platform/PageOther' component={PageOther}/> </CacheSwitch> </div> ) } } export default App;
動(dòng)態(tài)路由
function AppRouter() { return ( <Router history={history}> <AppContainer> <CustomHeader /> <CacheSwitch> {routes.map((route: RouteType, index: number) => { return route.cache ? ( <CacheRoute exact={true} path={`/${route.routerPath}`} key={index} component={route.component} /> ) : ( <Route // strict={true} exact={true} path={`/${route.routerPath}`} key={index} component={route.component} /> ); })} <Redirect to="/login" /> </CacheSwitch> </AppContainer> </Router> ); }
動(dòng)態(tài)理由,加判斷標(biāo)志位:cache,只有傳遞了cache頁(yè)面才能被緩存,沒(méi)有傳遞cache,就用普通路由形式
{ path: '/PageA', component: PageA, cache:true,//判斷標(biāo)志位 }, { path: '/PageB', component: PageB, },
2、如何更新其他想要更新的業(yè)務(wù)數(shù)據(jù)
//緩存A頁(yè)面跳轉(zhuǎn)至other頁(yè)面() componentDidCache = () => { console.log('List cached') } //緩存恢復(fù)(從other頁(yè)面跳轉(zhuǎn)返回A頁(yè)面) componentDidRecover = () => { // 這里可以更新業(yè)務(wù)數(shù)據(jù) console.log('List recovered') }
3、參考
https://github.com/CJY0208/react-router-cache-route/blob/HEAD/README_CN.md
到此這篇關(guān)于React router cache route實(shí)現(xiàn)緩存頁(yè)面流程介紹的文章就介紹到這了,更多相關(guān)React router cache route內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
搭建React?Native熱更新平臺(tái)的詳細(xì)過(guò)程
這篇文章主要介紹了搭建React?Native熱更新平臺(tái),要實(shí)現(xiàn)?React?Native?熱更新功能,有四種思路?Code?Push、Pushy、Expo?和自研,感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧2022-05-05React錯(cuò)誤邊界Error Boundaries
錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹(shù)任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級(jí)UI,而并不會(huì)渲染那些發(fā)生崩潰的子組件樹(shù)2023-01-01詳解React中錯(cuò)誤邊界的原理實(shí)現(xiàn)與應(yīng)用
在React中,錯(cuò)誤邊界是一種特殊的組件,用于捕獲其子組件樹(shù)中發(fā)生的JavaScript錯(cuò)誤,并防止這些錯(cuò)誤冒泡至更高層,導(dǎo)致整個(gè)應(yīng)用崩潰,下面我們就來(lái)看看它的具體應(yīng)用吧2024-03-03