在 React 应用中，可以通过多种方式缓存页面数据，从而提升性能、优化用户体验，尤其在需要频繁请求和重渲染的场景中。以下是实现页面数据缓存的几种常见方法及其代码示例。
1. 在组件状态中缓存数据
在页面未卸载的情况下，将数据存储在组件的 state 中，避免重复请求。
js
import React, { useState, useEffect } from "react";
function MyPage() {
const [data, setData] = useState(null);
useEffect(() => {
// 模拟数据请求
if (!data) {
console.log("Fetching data...");
setTimeout(() => {
setData("This is cached data!");
}, 1000);
}
}, [data]);
return (
<div>
<h1>页面数据缓存示例</h1>
<p>{data || "Loading..."}</p>
</div>
);
}
export default MyPage;优点
简单易用。
数据只在页面卸载时丢失。缺点
页面卸载后数据会丢失。
不适合需要持久化的数据。2. 使用 localStorage 持久化缓存
将页面数据存储到 localStorage 中，在刷新或重新进入页面时自动加载。示例代码
js
import React, { useState, useEffect } from "react";
function MyPage() {
const [data, setData] = useState(() => {
// 初始加载时从 localStorage 读取数据
const cachedData = localStorage.getItem("myPageData");
return cachedData ? JSON.parse(cachedData) : null;
});
useEffect(() => {
if (!data) {
console.log("Fetching data...");
setTimeout(() => {
const fetchedData = "This is persistent cached data!";
setData(fetchedData);
localStorage.setItem("myPageData", JSON.stringify(fetchedData));
}, 1000);
}
}, [data]);
return (
<div>
<h1>页面数据缓存示例</h1>
<p>{data || "Loading..."}</p>
</div>
);
}
export default MyPage;优点
数据在页面刷新或关闭后仍然可用。
适合需要长期保存的数据。缺点
手动管理数据清理。
数据存储容量有限（通常 5-10MB）。3. 使用 sessionStorage 短期缓存
将页面数据存储在 sessionStorage 中，浏览器关闭时数据会自动清除。示例代码
js
import React, { useState, useEffect } from "react";
function MyPage() {
const [data, setData] = useState(() => {
const cachedData = sessionStorage.getItem("myPageData");
return cachedData ? JSON.parse(cachedData) : null;
});
useEffect(() => {
if (!data) {
console.log("Fetching data...");
setTimeout(() => {
const fetchedData = "This is session cached data!";
setData(fetchedData);
sessionStorage.setItem("myPageData", JSON.stringify(fetchedData));
}, 1000);
}
}, [data]);
return (
<div>
<h1>页面数据缓存示例</h1>
<p>{data || "Loading..."}</p>
</div>
);
}
export default MyPage;优点
比 localStorage 更适合短期缓存。
数据清除后不会影响其他页面。缺点
浏览器关闭后数据会丢失。4. 使用状态管理库（如 Redux）缓存
通过全局状态管理，将页面数据存储在 Redux Store 中，避免跨组件的数据丢失。示例代码
1.定义 Redux Store 和 Action：
java
// store.js
import { createStore } from "redux";
const initialState = { pageData: null };
function reducer(state = initialState, action) {
switch (action.type) {
case "SET_DATA":
return { ...state, pageData: action.payload };
default:
return state;
}
}
const store = createStore(reducer);
export default store;2.在组件中使用 Redux
java
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
function MyPage() {
const data = useSelector((state) => state.pageData);
const dispatch = useDispatch();
useEffect(() => {
if (!data) {
console.log("Fetching data...");
setTimeout(() => {
const fetchedData = "This is Redux cached data!";
dispatch({ type: "SET_DATA", payload: fetchedData });
}, 1000);
}
}, [data, dispatch]);
return (
<div>
<h1>页面数据缓存示例</h1>
<p>{data || "Loading..."}</p>
</div>
);
}
export default MyPage;优点
数据在组件间共享。
适合复杂的状态管理场景。缺点
增加了项目复杂度。
配置 Redux 需要额外的学习成本。5. 使用 React Query 进行缓存
React Query 是一种流行的异步数据管理库，可以轻松实现数据缓存和自动刷新。示例代码
安装 react-query：
bash
npm install @tanstack/react-query使用 useQuery 缓存数据：
java
import React from "react";
import { useQuery } from "@tanstack/react-query";
function fetchPageData() {
return new Promise((resolve) =>
setTimeout(() => resolve("This is React Query cached data!"), 1000)
);
}
function MyPage() {
const { data, isLoading } = useQuery(["pageData"], fetchPageData);
return (
<div>
<h1>页面数据缓存示例</h1>
<p>{isLoading ? "Loading..." : data}</p>
</div>
);
}
export default MyPage;优点
自动管理数据缓存和刷新。
支持分页和复杂数据同步。缺点
需要额外安装库。总结
根据需求选择适合的方式来缓存页面数据。