react实现组件状态缓存

17 篇文章 0 订阅


前言

在移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项目,点击查看其详情,进入详情页,从详情页退回列表页时,需要停留在离开列表页时的浏览位置上,react中没有现成得保留组件状态得方法。

但是有第三方库 react-activation 个人感觉这个好用!


提示:以下是本篇文章正文内容,下面案例可供参考

一、安装第三方库

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

总结

以上就是要保留组件状态得最佳办法了。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

范德萨_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值