react如何實現組件狀態緩存

這篇文章主要介紹“react如何實現組件狀態緩存”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“react如何實現組件狀態緩存”文章能幫助大家解決問題。

一、安裝第三方庫

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、在需要保留狀態得組件上使用 KeepAlive 包裹

我要保留cate組件得狀態所以使用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

關于“react如何實現組件狀態緩存”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。