← 返回缓存测试

Request Memoization（请求记忆化）测试

🔄 什么是 Request Memoization？

Request Memoization 是 React 的一个功能，在单次渲染过程中自动去重相同的请求。 即使多个组件请求相同的数据，实际上只会发起一次网络请求。

关键特性：

  • 自动去重：相同的请求在一次渲染中只执行一次
  • 生命周期：只在单次请求的渲染周期内有效
  • 跨组件：不同组件的相同请求会共享结果
  • 与 Data Cache 独立：即使禁用 Data Cache 也会生效

⚠️ 重要：需要使用 React 的 cache() API

import { cache } from 'react';

const getData = cache(async (url) => {

return await fetch(url);

});

只有用 cache() 包装的函数才会启用 Request Memoization！

📅 页面渲染时间：2025-12-17T09:54:09.471Z

🧪 测试场景

下面有 3 个组件，它们都调用了 fetchData(DATA_ID)。 因为使用了 cache() API 包装， 所以虽然有 4 次调用（ComponentA、ComponentB、ComponentC 两次）， 但实际只会执行一次函数逻辑。

📋 查看验证方法：

  1. 打开终端，查看服务端日志
  2. 刷新页面，观察 [FETCH #N] 日志
  3. 如果 Request Memoization 生效，你应该只看到一次 FETCH 日志（[FETCH #1]）
  4. 所有组件会共享同一个 Request ID 和 Fetch Number

📦 组件渲染结果

下面 3 个组件都请求了相同的 API，但实际只发起了一次网络请求：

组件 A

Fetch #: 1

Request ID: dw8jf

Time: 2025-12-17T09:54:09.598Z

组件 B

Fetch #: 1

Request ID: dw8jf

Time: 2025-12-17T09:54:09.598Z

组件 C（同一组件多次请求）

第 1 次调用：

Fetch #: 1

Request ID: dw8jf

第 2 次调用：

Fetch #: 1

Request ID: dw8jf

✅ 预期结果：
所有组件的 Fetch # 和 Request ID 应该相同， 证明它们共享了同一次请求的结果。
查看终端日志，应该只看到一次 [FETCH] 日志。

🔍 Request Memoization vs Data Cache

特性Request MemoizationData Cache
作用范围单次渲染周期跨请求持久化
生命周期渲染完成后失效持久化到文件系统
去重机制同一渲染中的重复请求不同请求之间的缓存
是否可禁用❌ 无法禁用（React 内置）✅ 可以禁用（cache: 'no-store'）
刷新页面新的渲染周期，重新请求使用缓存，不重新请求

💡 实际应用场景

场景 1：多个组件需要同一份数据

例如：Header、Sidebar、Main 都需要显示用户信息。 不需要担心重复请求，React 会自动去重。

场景 2：父子组件都需要同一份数据

不需要通过 props 传递数据，每个组件都可以独立请求， React 会确保只发起一次网络请求。

场景 3：并行渲染的多个组件

使用 Suspense 并行渲染多个组件时，相同的请求会被自动去重， 提高性能和减少网络请求。

🧪 如何验证 Request Memoization？

  1. 1. 查看终端日志：

    刷新页面，查看有多少次 [FETCH] 日志。 如果 Request Memoization 生效，应该只有一次。

  2. 2. 对比 Request ID：

    页面上显示的所有 Request ID 应该相同，证明它们共享了同一次请求。

  3. 3. 查看网络面板：

    打开浏览器开发者工具的 Network 标签（注意：这里看不到服务端的网络请求）。 在服务端，相同的请求只会发起一次。

  4. 4. 刷新页面：

    每次刷新都是新的渲染周期，Request Memoization 会重置， 所以每次刷新都会看到一次新的 FETCH 日志。