react实现组件状态缓存的示例代码

Editor

目录

前言

一、安装第三方库

二、配置操作

总结
前言
在移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着滚动高度逐渐增加，数据也将采用触底分页加载的形式逐步增加，列表页浏览到某个位置，用户看到了感兴趣的项目，点击查看其详情，进入详情页，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上，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(
  
   
      
        
      
   
  [/B]
);
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:  },
  {
    path: '/home', element:,children:[
      {index:true, element: },
      {path:'index', element: },
      {path:'cate', element: },  //这里需要包裹
      {path:'cateItem', element: },
      {path:'shopcar', element: },
      {path:'Me', element: },
    ]
  },
  { path: '*', element:  }
]
export default routerList
总结
到此这篇关于react实现组件状态缓存的示例代码的文章就介绍到这了,更多相关react 组件状态缓存内容请搜索知鸟论坛以前的文章或继续浏览下面的相关文章希望大家以后多多支持知鸟论坛！

丁侦球

楼主，大恩不言谢了！知鸟论坛是最棒的！

胡37

楼主，大恩不言谢了！知鸟论坛是最棒的！

462710480

感谢楼主的无私分享！要想知鸟论坛好 就靠你我他

风吹吹蛋蛋疼风w

既然你诚信诚意的推荐了，那我就勉为其难的看看吧！知鸟论坛不走平凡路。

普通人物怨

楼主太厉害了！楼主，I*老*虎*U！我觉得知鸟论坛真是个好地方！

123456825

楼主，我太崇拜你了！我想我是一天也不能离开知鸟论坛。

无人岛屿颈

这东西我收了！谢谢楼主！知鸟论坛真好！

计划你大爷计j

楼主，我太崇拜你了！我想我是一天也不能离开知鸟论坛。

术数古籍专卖疤

楼主，大恩不言谢了！知鸟论坛是最棒的！