快捷導(dǎo)航

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

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

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

前言

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

react-activation簡(jiǎn)介

可以看看github介紹：react-activation

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

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

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àng)目里代碼實(shí)現(xiàn)

入口文件main.tsx

在不會(huì)被銷毀的位置放置外層，一般為應(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來(lái)避免沖突

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ù)是否為首頁(yè)設(shè)置z-50是因?yàn)樵谑醉?yè)有多個(gè)Popup,緩存了首頁(yè)后點(diǎn)擊Popup的里面內(nèi)容跳轉(zhuǎn)別的頁(yè)面，這個(gè)Popup因?yàn)閷蛹?jí)很高，并且和root是同級(jí)節(jié)點(diǎn)所以會(huì)一直存在，所以給這些Popup也要設(shè)置層級(jí)z-10,這樣在跳轉(zhuǎn)至別的頁(yè)面時(shí)，這些Popup的層級(jí)10沒(méi)有50高就不會(huì)出現(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 是一個(gè)非常實(shí)用的庫(kù)，能夠幫助我們?cè)赗eact中實(shí)現(xiàn)類似于Vue keep-alive的緩存功能。在單頁(yè)面應(yīng)用中，合理地使用KeepAlive來(lái)緩存組件，可以顯著提升用戶體驗(yàn)，減少重復(fù)渲染帶來(lái)的性能消耗。引入KeepAlive組件，設(shè)置cacheKey來(lái)避免沖突，是最重要的！

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

您可能感興趣的文章: