react實(shí)現(xiàn)組件狀態(tài)緩存的示例代碼
前言
在移動(dòng)端中,用戶訪問(wèn)了一個(gè)列表頁(yè),上拉瀏覽列表頁(yè)的過(guò)程中,隨著滾動(dòng)高度逐漸增加,數(shù)據(jù)也將采用觸底分頁(yè)加載的形式逐步增加,列表頁(yè)瀏覽到某個(gè)位置,用戶看到了感興趣的項(xiàng)目,點(diǎn)擊查看其詳情,進(jìn)入詳情頁(yè),從詳情頁(yè)退回列表頁(yè)時(shí),需要停留在離開(kāi)列表頁(yè)時(shí)的瀏覽位置上,react中沒(méi)有現(xiàn)成得保留組件狀態(tài)得方法。
但是有第三方庫(kù) react-activation 個(gè)人感覺(jué)這個(gè)好用!
提示:以下是本篇文章正文內(nèi)容,下面案例可供參考
一、安裝第三方庫(kù)
npm i react-activation
二、配置操作
1、在根目錄引入 AliveScope
import {AliveScope} from 'react-activation' import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ? <BrowserRouter> ? ? <Provider store={store}> ? ? ? <AliveScope> ? ? ? ? <App /> ? ? ? </AliveScope> ? ? </Provider> ? </BrowserRouter> );
2、在需要保留狀態(tài)得組件上使用 KeepAlive 包裹
我要保留cate組件得狀態(tài)所以使用keepAlive包裹c(diǎn)ate組件
import { Navigate } from 'react-router-dom' import {KeepAlive} from 'react-activation' // 懶加載路由需要放到普通路由最下面 import NotFound from '../pages/notFound' import Layout from '../pages/Layout' import Home from '../pages/Layout/Home' import Cate from '../pages/Layout/Cate' import CateItem from '../pages/Layout/CateItem' import ShopCar from '../pages/Layout/ShopCar' import Me from '../pages/Layout/Me' import ItemAll from '../pages/ItemAll' const routerList = [ ? { path: '/', element: <Navigate to="/home" /> }, ? { ? ? path: '/home', element:<Layout />,children:[ ? ? ? {index:true, element: <Navigate to="index" />}, ? ? ? {path:'index', element: <Home />}, ? ? ? {path:'cate', element: <KeepAlive><Cate /></KeepAlive>}, ?//這里需要包裹 ? ? ? {path:'cateItem', element: <CateItem />}, ? ? ? {path:'shopcar', element: <ShopCar />}, ? ? ? {path:'Me', element: <Me />}, ? ? ] ? }, ? { path: '*', element: <NotFound /> } ] export default routerList
總結(jié)
到此這篇關(guān)于react實(shí)現(xiàn)組件狀態(tài)緩存的示例代碼的文章就介紹到這了,更多相關(guān)react 組件狀態(tài)緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
如何在 React 中調(diào)用多個(gè) onClick 函數(shù)
這篇文章主要介紹了如何在React中調(diào)用多個(gè)onClick函數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11react實(shí)現(xiàn)可播放的進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)可播放的進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式
這篇文章主要介紹了關(guān)于React動(dòng)態(tài)修改元素樣式的三種方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08詳解react的兩種動(dòng)態(tài)改變css樣式的方法
這篇文章主要介紹了詳解react的兩種動(dòng)態(tài)改變css樣式的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04React 事件綁定的實(shí)現(xiàn)及區(qū)別
事件綁定也是其中一部分內(nèi)容,通過(guò)事件委托和事件合成,React 在內(nèi)部對(duì)事件進(jìn)行優(yōu)化和處理,減少了事件處理函數(shù)的調(diào)用次數(shù),從而提升了性能,本文主要介紹了React事件綁定的實(shí)現(xiàn)及區(qū)別,感興趣的可以了解一下2024-03-03詳解React-Native全球化多語(yǔ)言切換工具庫(kù)react-native-i18n
這篇文章主要介紹了詳解React-Native全球化語(yǔ)言切換工具庫(kù)react-native-i18n,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11React內(nèi)部實(shí)現(xiàn)cache方法示例詳解
這篇文章主要為大家介紹了React內(nèi)部實(shí)現(xiàn)cache方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11