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