react實現(xiàn)組件狀態(tài)緩存的示例代碼
更新時間：2023年02月24日 09:30:56 作者：范德薩_
本文主要介紹了react實現(xiàn)組件狀態(tài)緩存的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
前言
在移動端中，用戶訪問了一個列表頁，上拉瀏覽列表頁的過程中，隨著滾動高度逐漸增加，數(shù)據(jù)也將采用觸底分頁加載的形式逐步增加，列表頁瀏覽到某個位置，用戶看到了感興趣的項目，點擊查看其詳情，進入詳情頁，從詳情頁退回列表頁時，需要停留在離開列表頁時的瀏覽位置上，react中沒有現(xiàn)成得保留組件狀態(tài)得方法。
但是有第三方庫 react-activation 個人感覺這個好用！
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、安裝第三方庫
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包裹cate組件
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é)
到此這篇關于react實現(xiàn)組件狀態(tài)緩存的示例代碼的文章就介紹到這了,更多相關react 組件狀態(tài)緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
React如何利用Antd的Form組件實現(xiàn)表單功能詳解
這篇文章主要給大家介紹了關于React如何利用Antd的Form組件實現(xiàn)表單功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
React實現(xiàn)一個支持動態(tài)插槽的Layout組件
這篇文章主要為大家詳細介紹了如何使用React實現(xiàn)一個支持動態(tài)注冊內(nèi)容的插槽組件,文中的示例代碼簡潔易懂,有需要的小伙伴可以了解一下2025-02-02
本文主要介紹了react hooks組件間的傳值方式(使用ts)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
React 起源于 Facebook 的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關資料,需要的朋友可以參考下2016-11-11
React+Antd+Redux實現(xiàn)待辦事件的方法
這篇文章主要介紹了React+Antd+Redux實現(xiàn)待辦事件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要為大家詳細介紹了React實現(xiàn)表格選取，類似于Excel選中一片區(qū)域并獲得選中區(qū)域的所有數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家介紹了create-react-app常用自定義配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
Hooks 是一種函數(shù)，該函數(shù)允許您從函數(shù)式組件 “勾住(hook into)” React 狀態(tài)和生命周期功能。 Hooks 在類內(nèi)部不起作用 - 它們允許你無需類就使用 React，本文帶領大家學習React 小技巧教你如何擺脫hooks依賴煩惱，感興趣的朋友一起看看吧2021-05-05
React Native react-navigation 導航使用詳解
本篇文章主要介紹了React Native react-navigation 導航使用詳解，詳解的介紹了react-navigation導航的使用，具有一定的參考價值，有興趣的可以了解一下2017-12-12
本文主要介紹了react 可拖拽進度條的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04