快捷導(dǎo)航

React模擬實現(xiàn)Vue的keepAlive功能

更新時間：2024年10月28日 09:13:17 作者：墨墨博客

Vue中,keep-alive組件可以緩存組件狀態(tài),在路由切換時重新掛載,實現(xiàn)這一功能在React中并不簡單,但我們可以借助一個第三方庫——react-activation 來模擬Vue的keep-alive功能,需要的朋友可以參考下

前言

在React中，默認(rèn)情況下組件在被卸載后會銷毀狀態(tài)，這與Vue的keep-alive功能不同。在Vue中，keep-alive組件可以緩存組件狀態(tài)，在路由切換時重新掛載。實現(xiàn)這一功能在React中并不簡單，但我們可以借助一個第三方庫——react-activation 來模擬Vue的keep-alive功能。

react-activation簡介

可以看看github介紹：react-activation

react-activation 是一個用于React的狀態(tài)保持庫，可以緩存組件的狀態(tài)和DOM，適用于多頁面應(yīng)用的路由緩存等場景。它的核心功能包括：

緩存組件：在不卸載組件的情況下保存其狀態(tài)和DOM。
恢復(fù)組件：當(dāng)組件重新激活時，可以保留之前的狀態(tài)和DOM，而無需重新渲染。
緩存控制：可以通過配置選項控制哪些組件需要緩存，哪些不需要。

react-activation安裝

yarn add react-activation
# 或者
npm install react-activation

兼容性

React v16 / v17 / v18
Preact v10+
兼容 SSR

注意?。?！

不要使用 <React.StrictMode /> 嚴(yán)格模式
(React v18+) 不要使用 ReactDOMClient.createRoot, 而是使用 ReactDOM.render

項目里代碼實現(xiàn)

入口文件main.tsx

在不會被銷毀的位置放置外層，一般為應(yīng)用入口處

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文件

這里可以根據(jù)router.tsx的配置看是否需要緩存，引入KeepAlive組件，設(shè)置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
      )
    }))
  );
  // 這里根據(jù)是否為首頁設(shè)置z-50是因為在首頁有多個Popup,緩存了首頁后點擊Popup的里面內(nèi)容跳轉(zhuǎn)別的頁面，這個Popup因為層級很高，并且和root是同級節(jié)點所以會一直存在，所以給這些Popup也要設(shè)置層級z-10,這樣在跳轉(zhuǎn)至別的頁面時，這些Popup的層級10沒有50高就不會出現(xiàn)
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>
	)
}

總結(jié)

react-activation 是一個非常實用的庫，能夠幫助我們在React中實現(xiàn)類似于Vue keep-alive的緩存功能。在單頁面應(yīng)用中，合理地使用KeepAlive來緩存組件，可以顯著提升用戶體驗，減少重復(fù)渲染帶來的性能消耗。引入KeepAlive組件，設(shè)置cacheKey來避免沖突，是最重要的！

以上就是React模擬實現(xiàn)Vue的keepAlive功能的詳細內(nèi)容，更多關(guān)于React keepAlive功能的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: