前言
在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(
<AliveScope>
<Router>
<App />
</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 (
<div
className={`w-full h-screen flex justify-center bg-primary relative ${
location.pathname === '/home' || location.pathname === '/'
? ''
: 'z-50'
}`}
>
<div className="w-[393px] h-screen">
{route}
</div>
</div>
)
}
总结
react-activation 是一个非常实用的库,能够帮助我们在React中实现类似于Vue keep-alive的缓存功能。在单页面应用中,合理地使用KeepAlive来缓存组件,可以显著提升用户体验,减少重复渲染带来的性能消耗。 引入KeepAlive组件,设置cacheKey来避免冲突,是最重要的!