React如何实现Vue的keepAlive功能

前言

在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 (<divclassName={`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来避免冲突，是最重要的！