React如何实现Vue的keepAlive功能

原创

已于 2024-11-01 18:39:21 修改 · 839 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #vue.js #前端 #keepalive #缓存 #前端框架

于 2024-10-26 14:49:31 首次发布

前言

在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 />
    <