精品国内网站建设,珠海免费模板建站,百度收录什么意思,网站弹出一张图怎么做代码文章目录前言一、核心作用二、工作原理三、使用场景1. 避免重复数据请求2. 优化昂贵计算四、缓存规则详解五、与其它缓存方式对比六、服务端特殊行为七、最佳实践八、缓存失效策略九、使用限制十、与数据获取库集成总结#xff1a;何时使用 cache()前言
React 的 cache() 函数…
文章目录前言一、核心作用二、工作原理三、使用场景1. 避免重复数据请求2. 优化昂贵计算四、缓存规则详解五、与其它缓存方式对比六、服务端特殊行为七、最佳实践八、缓存失效策略九、使用限制十、与数据获取库集成总结何时使用 cache()前言
React 的 cache() 函数是 React 19 引入的重要 API主要用于优化重复计算和数据获取。以下是对 cache() 函数的详细解析 一、核心作用
cache() 创建一个缓存版本的函数当相同参数重复调用时直接返回缓存结果
import { cache } from react;const cachedFn cache(fn);二、工作原理
首次调用执行函数并缓存结果相同参数再次调用直接返回缓存值不执行函数不同参数调用重新执行并缓存新结果 三、使用场景
1. 避免重复数据请求
const getData cache(async (id) {const res await fetch(https://api.example.com/data/${id});return res.json();
});async function Component({ id }) {const data await getData(id); // 相同id只请求一次
}2. 优化昂贵计算
const calculateSum cache((a, b) {// 复杂计算逻辑return a b;
});function Component() {const result calculateSum(5, 10); // 相同参数直接返回缓存
}四、缓存规则详解
行为结果相同参数调用返回缓存值不同参数调用执行函数并缓存新结果服务端组件间调用同一请求共享缓存客户端组件间调用整个应用生命周期共享缓存五、与其它缓存方式对比
方法适用场景缓存范围持久性cache()跨组件/服务端-客户端全局请求/会话级useMemo单组件内部组件实例渲染周期useCallback事件处理函数组件实例依赖变更前React.memo组件渲染结果组件实例Props 不变时六、服务端特殊行为
在 RSC服务器组件中
缓存自动绑定到当前请求请求结束时缓存自动清除不同请求之间的缓存完全隔离
// 服务端组件
export default async function Page() {const data await getData(1); // 缓存绑定到该HTTP请求
}七、最佳实践 纯函数优先只缓存无副作用的函数 // ✅ 推荐纯函数
const getPrice cache((productId) ...)// ❌ 避免有副作用函数
const updateDB cache(() { ... }) // 危险客户端组件使用注意 use client;
import { cache } from react;// 客户端需单例模式
const cachedFn cache(fn);
export default function ClientComp() {// 使用cachedFn
}避免缓存大型对象 // ❌ 不推荐
const getHugeData cache(() 1GB数据)// ✅ 推荐
const getDataChunk cache((chunkId) 小块数据)八、缓存失效策略
React 未内置失效机制需手动实现
// 自定义带失效时间的缓存
const createTimedCache (fn, ttl 60_000) {const cache new Map();return (...args) {const key JSON.stringify(args);if (cache.has(key)) {const { timestamp, value } cache.get(key);if (Date.now() - timestamp ttl) return value;}const value fn(...args);cache.set(key, { value, timestamp: Date.now() });return value;};
};九、使用限制
参数必须可序列化对象/数组需结构稳定避免闭包陷阱function Component() {// ❌ 错误每次渲染创建新函数const badCache cache((x) ...);// ✅ 正确模块级缓存return Child /
}// 模块级缓存
const goodCache cache((x) ...);十、与数据获取库集成
配合 Next.js / SWR 等库
// Next.js 示例
import { cache } from react;export const revalidate 3600; // 每小时重新验证const getData cache(async (id) {const res await fetch(https://...);return res.json();
});export async function generateStaticParams() {const data await getData();return data.map(item ({ id: item.id }));
}总结何时使用 cache()
场景推荐使用跨组件共享数据获取逻辑✅避免重复 API 请求✅计算密集型操作优化✅事件处理函数❌状态更新逻辑❌需要即时失效的缓存❌ (需扩展)
通过合理使用 cache()可显著提升 React 应用性能特别在 RSC 架构中能有效减少不必要的计算和网络请求。
