沈阳市网站建设报价,mip改造wordpress,网络推广渠道一般包括哪些,做网站服务器装虚拟机前言
在React中#xff0c;默认情况下组件在被卸载后会销毁状态#xff0c;这与Vue的keep-alive功能不同。在Vue中#xff0c;keep-alive组件可以缓存组件状态#xff0c;在路由切换时重新挂载。实现这一功能在React中并不简单#xff0c;但我们可以借助一个第三方库——…前言
在React中默认情况下组件在被卸载后会销毁状态这与Vue的keep-alive功能不同。在Vue中keep-alive组件可以缓存组件状态在路由切换时重新挂载。实现这一功能在React中并不简单但我们可以借助一个第三方库——react-activation 来模拟Vue的keep-alive功能。
react-activation简介
可以看看github介绍react-activation react-activation 是一个用于React的状态保持库可以缓存组件的状态和DOM适用于多页面应用的路由缓存等场景。它的核心功能包括
缓存组件在不卸载组件的情况下保存其状态和DOM。恢复组件当组件重新激活时可以保留之前的状态和DOM而无需重新渲染。缓存控制可以通过配置选项控制哪些组件需要缓存哪些不需要。
react-activation安装
yarn add react-activation
# 或者
npm install react-activation兼容性 React v16 / v17 / v18 Preact v10 兼容 SSR
注意
不要使用 React.StrictMode / 严格模式(React v18) 不要使用 ReactDOMClient.createRoot, 而是使用 ReactDOM.render
项目里代码实现
入口文件main.tsx
在不会被销毁的位置放置 外层一般为应用入口处
import { render } from react-dom;
import { AliveScope } from react-activation;
render(AliveScopeRouterApp //Router/AliveScope,document.getElementById(root)
);
路由文件 router.tsx
export const routes [{path: /,element: Home /,keepAlive: true},{path: /home,element: Home /,keepAlive: true},{path: /xxx,element: Index2 /},
]App.tsx文件
这里可以根据router.tsx的配置看是否需要缓存 引入KeepAlive组件设置cacheKey来避免冲突
function App() {
const location useLocation();
const route useRoutes(routes.map(item ({...item,element: item.keepAlive ? (KeepAlive cacheKey{item.path}{item.element}/KeepAlive) : (item.element)})));// 这里根据是否为首页设置z-50是因为在首页有多个Popup,缓存了首页后点击Popup的里面内容跳转别的页面这个Popup因为层级很高并且和root是同级节点所以会一直存在所以给这些Popup也要设置层级z-10,这样在跳转至别的页面时这些Popup的层级10没有50高就不会出现
return (divclassName{w-full h-screen flex justify-center bg-primary relative ${location.pathname /home || location.pathname /? : z-50}}div classNamew-[393px] h-screen{route}/div/div)
}总结
react-activation 是一个非常实用的库能够帮助我们在React中实现类似于Vue keep-alive的缓存功能。在单页面应用中合理地使用KeepAlive来缓存组件可以显著提升用户体验减少重复渲染带来的性能消耗。 引入KeepAlive组件设置cacheKey来避免冲突是最重要的
