react 页面数据缓存方案

在 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;

优点

复制代码
自动管理数据缓存和刷新。
支持分页和复杂数据同步。

缺点

复制代码
需要额外安装库。

总结

复制代码
根据需求选择适合的方式来缓存页面数据。
相关推荐
奋飛9 分钟前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
sunbyte18 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟26 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor27 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter28 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
呆呆的心34 分钟前
JavaScript 深入理解闭包与柯里化:从原理到实践 🚀
javascript·面试
快起来别睡了35 分钟前
看完这篇文章,你就知道什么是proxy
javascript
请你吃div36 分钟前
JavaScript 实用函数大全(超实用)
前端·javascript·面试
一个水瓶座程序猿.37 分钟前
Vue3 中使用 Vueuse
前端·javascript·vue.js
夏梦春蝉38 分钟前
ES6从入门到精通:Symbol与迭代器
前端·javascript·es6