###
React 中实现组件
缓存（Keep-Alive 功能）
在
React 中实现类似 Vue 的 `keep-alive` 功能，可以通过以下几种方式完成。以下是详细说明和代码示例：
#### 1. 使用第三方库 `
react-activation`
`
react-activation` 是一个专门为
React 设计的库，用于实现页面状态
缓存功能。它通过将子组件渲染到一个不会被卸载的容器中，避免组件的重新挂载和卸载[^3]。
```javascript
import
React from "
react";
import Activation from "
react-activation";
function CachedComponent() {
const [state, setState] =
React.useState(0);
return (
<div>
<p>当前计数: {state}</p>
<button onClick={() => setState(state + 1)}>增加</button>
</div>
);
}
function App() {
const [show, setShow] =
React.useState(true);
return (
<div>
<button onClick={() => setShow(!show)}>切换组件</button>
{show && (
<Activation>
<CachedComponent />
</Activation>
)}
</div>
);
}
export default App;
```
上述代码展示了如何使用 `
react-activation` 来
缓存组件状态，即使组件被隐藏，其状态仍然保持不变[^3]。
#### 2. 自定义实现 Keep-Alive 功能
如果不希望依赖第三方库，可以手动实现类似功能。通过维护一个映射表来存储组件的状态，并在需要时重新加载组件。以下是一个简单的实现：
```javascript
import
React, { useState, useEffect, useRef } from "
react";
const cacheMap = new Map();
function KeepAlive({ children }) {
const cacheKey = JSON.stringify(children.props);
const ref = useRef(null);
useEffect(() => {
if (!cacheMap.has(cacheKey)) {
cacheMap.set(cacheKey,
React.cloneElement(children));
}
ref.current = cacheMap.get(cacheKey);
}, [cacheKey, children]);
return ref.current || null;
}
function CachedComponent() {
const [state, setState] = useState(0);
return (
<div>
<p>当前计数: {state}</p>
<button onClick={() => setState(state + 1)}>增加</button>
</div>
);
}
function App() {
const [show, setShow] = useState(true);
return (
<div>
<button onClick={() => setShow(!show)}>切换组件</button>
{show && <KeepAlive><CachedComponent /></KeepAlive>}
</div>
);
}
export default App;
```
此方法通过 `useEffect` 和 `useRef` 创建了一个全局
缓存机制，确保组件的状态在隐藏后仍然保留[^3]。
#### 3. 结合 `
react-router-dom` 实现 Keep-Alive
在
React Router 中，可以通过自定义封装组件来实现类似功能。以下是一个结合 `
react-router-dom` 的实现示例[^4]：
```javascript
import
React from "
react";
import { Route, RouteChildrenProps, RouteProps } from "
react-router-dom";
type Props = RouteProps;
export default function KeepAlive({ path, children, ...rest }: Props) {
const child = (props: RouteChildrenProps) => {
return (
<div className="keep-alive" style={{ display: props.match ? "block" : "none" }}>
{children}
</div>
);
};
return <Route path={path} {...rest} children={child} />;
}
```
在此实现中，通过设置 `display: none` 来隐藏组件而不是卸载它，从而保留组件的状态。
#### 4. 注意事项
- **
React.StrictMode**：如果使用了 `<
React.StrictMode />`，可能会导致某些副作用被调用两次，影响状态
缓存的效果。因此建议在开发阶段移除 `<
React.StrictMode />`[^1]。
- **
ReactDOM.render**：在
React 18+ 中，推荐使用 `
ReactDOM.createRoot`，但为了兼容状态
缓存，可以继续使用 `
ReactDOM.render`。
---
###
本文介绍了一种常见的React项目中遇到的问题——浏览器缓存导致的新版本部署后页面未更新，并提供了解决方案，即通过在URL后添加hash值如时间戳或随机数的方式，确保浏览器每次都能获取到最新资源。
扫一扫
720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
