欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React router cache route實(shí)現(xiàn)緩存頁(yè)面流程介紹

 更新時(shí)間:2023年01月10日 14:02:34   作者:山鬼taro  
react-router自身沒(méi)有路由緩存的特性,在5.x版本之前,我們可以基于react-router-cache-route來(lái)實(shí)現(xiàn)路由緩存功能。但是react-router 6.x在實(shí)現(xiàn)上做了比較大的變化,react-router-cache-route沒(méi)有提供相應(yīng)的支持

一、背景

在開(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 父組件與子組件之間的值傳遞的方法

    react 父組件與子組件之間的值傳遞的方法

    本篇文章主要介紹了react 父組件與子組件之間的值傳遞的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • React?redux?原理及使用詳解

    React?redux?原理及使用詳解

    這篇文章主要為大家介紹了React?redux?原理及使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • 搭建React?Native熱更新平臺(tái)的詳細(xì)過(guò)程

    搭建React?Native熱更新平臺(tái)的詳細(xì)過(guò)程

    這篇文章主要介紹了搭建React?Native熱更新平臺(tái),要實(shí)現(xiàn)?React?Native?熱更新功能,有四種思路?Code?Push、Pushy、Expo?和自研,感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧
    2022-05-05
  • React如何立即更新DOM

    React如何立即更新DOM

    這篇文章主要介紹了React如何立即更新DOM問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • React錯(cuò)誤邊界Error Boundaries

    React錯(cuò)誤邊界Error Boundaries

    錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹(shù)任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級(jí)UI,而并不會(huì)渲染那些發(fā)生崩潰的子組件樹(shù)
    2023-01-01
  • React中useState和useEffect的用法詳解

    React中useState和useEffect的用法詳解

    Hooks?發(fā)布之后,函數(shù)組件能擁有自己的?state,React提供了很多內(nèi)置的Hooks,這篇文章就來(lái)和大家介紹一下useState?和?useEffect的使用,需要的可以參考一下
    2023-06-06
  • 在create-react-app中使用sass的方法示例

    在create-react-app中使用sass的方法示例

    這篇文章主要介紹了在create-react-app中使用sass的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-10-10
  • ReactJS中的自定義組件實(shí)例代碼

    ReactJS中的自定義組件實(shí)例代碼

    React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。這篇文章主要介紹了ReactJS中的自定義組件的代碼講解,需要的朋友可以參考下
    2019-11-11
  • 詳解React中共享組件邏輯的三種方式

    詳解React中共享組件邏輯的三種方式

    這篇文章主要介紹了詳解React中共享組件邏輯的三種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02
  • 詳解React中錯(cuò)誤邊界的原理實(shí)現(xiàn)與應(yīng)用

    詳解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

最新評(píng)論