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

恰克与飞鸟

前言

在移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着滚动高度逐渐增加，数据也将采用触底分页加载的形式逐步增加，列表页浏览到某个位置，用户看到了感兴趣的项目，点击查看其详情，进入详情页，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上，react中没有现成得保留组件状态得方法。
但是有第三方库 react-activation 个人感觉这个好用！
提示：以下是本篇文章正文内容，下面案例可供参考

一、安装第三方库

1. npm i react-activation

复制代码

二、配置操作

1、在根目录引入 AliveScope

1. import {AliveScope} from 'react-activation'
   
2. import App from './App';
   
3. 
   
4. const root = ReactDOM.createRoot(document.getElementById('root'));
   
5. root.render(
   
6.   <BrowserRouter>
   
7.     <Provider store={store}>
   
8.       <AliveScope>
   
9.         <App />
   
10.       </AliveScope>
    
11.     </Provider>
    
12.   </BrowserRouter>
    
13. );

复制代码

2、在需要保留状态得组件上使用 KeepAlive 包裹
我要保留cate组件得状态所以使用keepAlive包裹cate组件

1. import { Navigate } from 'react-router-dom'
   
2. import {KeepAlive} from 'react-activation'
   
3. 
   
4. // 懒加载路由需要放到普通路由最下面
   
5. import NotFound from '../pages/notFound'
   
6. import Layout from '../pages/Layout'
   
7. import Home from '../pages/Layout/Home'
   
8. import Cate from '../pages/Layout/Cate'
   
9. import CateItem from '../pages/Layout/CateItem'
   
10. import ShopCar from '../pages/Layout/ShopCar'
    
11. import Me from '../pages/Layout/Me'
    
12. import ItemAll from '../pages/ItemAll'
    
13. 
    
14. const routerList = [
    
15.   { path: '/', element: <Navigate to="/home" /> },
    
16.   {
    
17.     path: '/home', element:<Layout />,children:[
    
18.       {index:true, element: <Navigate to="index" />},
    
19.       {path:'index', element: <Home />},
    
20.       {path:'cate', element: <KeepAlive><Cate /></KeepAlive>},  //这里需要包裹
    
21.       {path:'cateItem', element: <CateItem />},
    
22.       {path:'shopcar', element: <ShopCar />},
    
23.       {path:'Me', element: <Me />},
    
24.     ]
    
25.   },
    
26.   { path: '*', element: <NotFound /> }
    
27. ]
    
28. 
    
29. export default routerList

复制代码

总结

到此这篇关于react实现组件状态缓存的示例代码的文章就介绍到这了,更多相关react 组件状态缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/276311.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！