React 中实现 vue keep-alive 功能的方法

1. 使用 React Router 的 React.lazy 和 Suspense

React Router 的 React.lazy 和 Suspense 可以用于动态加载组件，并且可以结合 React.memo 或自定义的缓存逻辑来实现类似 keep-alive 的功能。

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));function App() {return (<Router><Suspense fallback={<div>Loading...</div>}><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /></Switch></Suspense></Router>);
}export default App;

2. 使用自定义的 Higher-Order Component (HOC)

import React, { Component } from 'react';const withCache = (WrappedComponent) => {class CacheComponent extends Component {constructor(props) {super(props);this.cachedInstance = null;}componentDidMount() {this.cachedInstance = <WrappedComponent {...this.props} />;}componentDidUpdate(prevProps) {if (prevProps.key !== this.props.key) {this.cachedInstance = <WrappedComponent {...this.props} />;}}render() {return this.cachedInstance;}}return CacheComponent;
};const Home = (props) => (<div><h1>Home Page</h1><p>{props.message}</p></div>
);const CachedHome = withCache(Home);function App() {const [message, setMessage] = React.useState('Welcome to the Home Page');return (<div><button onClick={() => setMessage('New Message')}>Change Message</button><CachedHome message={message} key={message} /></div>);
}export default App;

3. 使用 React Context 和自定义 Hook

import React, { createContext, useContext, useState, useEffect } from 'react';const CacheContext = createContext();const CacheProvider = ({ children }) => {const [cache, setCache] = useState({});const addToCache = (key, component) => {setCache((prevCache) => ({...prevCache,[key]: component}));};const getCachedComponent = (key) => {return cache[key];};return (<CacheContext.Provider value={{ addToCache, getCachedComponent }}>{children}</CacheContext.Provider>);
};const useCache = () => {const context = useContext(CacheContext);if (!context) {throw new Error('useCache must be used within a CacheProvider');}return context;
};const withCache = (WrappedComponent) => {return (props) => {const { addToCache, getCachedComponent } = useCache();const key = props.key || 'default';useEffect(() => {const cachedComponent = getCachedComponent(key);if (!cachedComponent) {const component = <WrappedComponent {...props} />;addToCache(key, component);}}, [key, props, addToCache, getCachedComponent]);return getCachedComponent(key);};
};const Home = (props) => (<div><h1>Home Page</h1><p>{props.message}</p></div>
);const CachedHome = withCache(Home);function App() {const [message, setMessage] = React.useState('Welcome to the Home Page');return (<CacheProvider><div><button onClick={() => setMessage('New Message')}>Change Message</button><CachedHome message={message} key={message} /></div></CacheProvider>);
}export default App;

4. 使用第三方库

有一些第三方库可以帮助实现类似 keep-alive 的功能，例如 react-keep-alive。

npm install react-keep-alive

import React from 'react';
import { KeepAlive, AliveScope } from 'react-keep-alive';const Home = (props) => (<div><h1>Home Page</h1><p>{props.message}</p></div>
);function App() {const [message, setMessage] = React.useState('Welcome to the Home Page');return (<AliveScope><div><button onClick={() => setMessage('New Message')}>Change Message</button><KeepAlive name="home"><Home message={message} /></KeepAlive></div></AliveScope>);
}export default App;