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

相关推荐
Carlos_sam10 分钟前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录19 分钟前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录39 分钟前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区1 小时前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路2 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9492 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8682 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie2 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端