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安装

bash 复制代码
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

在不会被销毁的位置放置 外层,一般为应用入口处

javascript 复制代码
import { render } from 'react-dom';
import { AliveScope } from 'react-activation';
render(
  <AliveScope>
    <Router>
      <App />
    </Router>
  </AliveScope>,
  document.getElementById('root')
);

路由文件 router.tsx

javascript 复制代码
export const routes = [
  {
    path: '/',
    element: <Home />,
    keepAlive: true
  },
  {
    path: '/home',
    element: <Home />,
    keepAlive: true
  },
  {
    path: '/xxx',
    element: <Index2 />
  },
]

App.tsx文件

这里可以根据router.tsx的配置看是否需要缓存, 引入KeepAlive组件,设置cacheKey来避免冲突

javascript 复制代码
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来避免冲突,是最重要的!

相关推荐
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪3 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端