import React, { experimental_useCache, Suspense } from 'react';

// 模拟一个 API 调用（替换为您实际的 API 端点）
const fetchUserData = async (userId) => {
  console.log(`正在获取用户 ID：${userId} 的用户数据`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟网络延迟
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`无法获取用户数据：${response.status}`);
  }
  return response.json();
};

// 创建 fetchUserData 函数的缓存版本
const getCachedUserData = experimental_useCache(fetchUserData);

function UserProfile({ userId }) {
  const userData = getCachedUserData(userId);

  return (
    

      
用户资料
      
姓名： {userData.name}
      
电子邮件： {userData.email}
    
  );
}

function App() {
  return (
    正在加载用户数据...

说明：

1. 导入 experimental_useCache：我们从 React 导入必要的 hook。
2. 定义 fetchUserData：此函数模拟从 API 获取用户数据。将模拟 API 调用替换为您实际的数据获取逻辑。await new Promise 模拟网络延迟，使缓存的效果更加明显。包含用于生产准备的错误处理。
3. 创建 getCachedUserData：我们使用 experimental_useCache 来创建 fetchUserData 函数的缓存版本。这是我们将在组件中实际使用的函数。
4. 在 UserProfile 中使用 getCachedUserData：UserProfile 组件调用 getCachedUserData 来检索用户数据。因为我们使用的是 experimental_useCache，所以如果数据已可用，则将从缓存中获取数据。
5. 用 Suspense 包装：UserProfile 组件用 Suspense 包装，以在数据获取时处理加载状态。这确保了流畅的用户体验，即使数据需要一些时间才能加载。
6. 多次调用：App 组件使用相同的 userId (1) 渲染两个 UserProfile 组件。第二个 UserProfile 组件将使用缓存的数据，避免第二次 API 调用。它还包括另一个具有不同 ID 的用户个人资料，以演示获取未缓存的数据。

在此示例中，第一个 UserProfile 组件将从 API 获取用户数据。但是，第二个 UserProfile 组件将使用缓存的数据，避免第二次 API 调用。这可以显著提高性能，尤其是在 API 调用成本高昂或数据被许多组件访问时。

与 Suspense 集成

experimental_useCache 旨在与 React 的 Suspense 功能无缝协作。Suspense 允许您声明式地处理正在等待数据加载的组件的加载状态。当您将 experimental_useCache 与 Suspense 结合使用时，React 将自动暂停组件的渲染，直到数据在缓存中可用或已从数据源获取。这允许您通过在数据加载时显示备用 UI（例如，加载微调器）来提供更好的用户体验。

在上面的示例中，Suspense 组件包装了 UserProfile 组件并提供了一个 fallback 属性。在获取用户数据时，将显示此备用 UI。数据可用后，将使用获取的数据渲染 UserProfile 组件。

React Server Components (RSCs) 和 experimental_useCache

当与 React Server Components 一起使用时，experimental_useCache 会发光。在 RSC 中，数据获取发生在服务器上，结果流式传输到客户端。experimental_useCache 可以通过确保每个请求只获取一次数据来显着优化服务器端数据获取，即使多个组件需要相同的数据。

考虑这样一种情况：您有一个服务器组件需要获取用户数据并在 UI 的多个部分显示它。如果没有 experimental_useCache，您最终可能会多次获取用户数据，这可能效率低下。使用 experimental_useCache，您可以确保用户数据只获取一次，然后缓存以供同一服务器请求中的后续使用。

示例（概念性 RSC 示例）：

// Server Component
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // 模拟从数据库获取用户数据
  await new Promise(resolve => setTimeout(resolve, 500)); // 模拟数据库查询延迟
  return { id: userId, name: `用户 ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

export default async function UserDashboard({ userId }) {
  const userData = await getCachedUserData(userId);

  return (
    

      
欢迎，{userData.name}！
      
      
    
  );
}

async function UserInfo({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
用户信息
      
电子邮件：{userData.email}
    
  );
}

async function UserActivity({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
最近活动
      
{userData.name} 查看了主页。
    
  );
}

在这个简化的示例中，UserDashboard、UserInfo 和 UserActivity 都是服务器组件。它们都需要访问用户数据。使用 experimental_useCache 确保每个服务器请求只调用一次 fetchUserData 函数，即使它在多个组件中使用。

注意事项和潜在缺点

虽然 experimental_useCache 提供了显着的好处，但重要的是要了解它的局限性和潜在的缺点：

• 实验状态：作为实验性 API，experimental_useCache 在未来的 React 版本中可能会发生更改或删除。在生产环境中使用时要小心，并准备好在必要时调整代码。请关注 React 的官方文档和发行说明以获取更新。
• 缓存失效：experimental_useCache 没有提供用于缓存失效的内置机制。当底层数据更改时，您需要实施自己的策略来使缓存失效。这可能涉及使用自定义 hook 或上下文提供程序来管理缓存生命周期。
• 内存使用情况：缓存数据会增加内存使用量。请注意您正在缓存的数据的大小，并考虑使用缓存驱逐或过期等技术来限制内存消耗。监控应用程序中的内存使用情况，尤其是在服务器端环境中。
• 参数序列化：传递给缓存函数的参数必须是可序列化的。这是因为 experimental_useCache 使用参数来生成缓存键。如果参数不可序列化，则缓存可能无法正常工作。
• 调试：调试缓存问题可能具有挑战性。使用日志记录和调试工具来检查缓存并验证它是否按预期运行。考虑向 fetchUserData 函数添加自定义调试日志记录，以跟踪何时获取数据以及何时从缓存中检索数据。
• 全局状态：避免在缓存函数中使用全局可变状态。这可能会导致意外行为，并使推理缓存变得困难。依靠函数参数和缓存的结果来维护一致的状态。
• 复杂的数据结构：缓存复杂的数据结构时要小心，尤其是在它们包含循环引用时。循环引用可能导致序列化期间出现无限循环或堆栈溢出错误。

缓存失效策略

由于 experimental_useCache 不处理失效，因此您可以采用以下策略：

• 手动失效：实施自定义 hook 或上下文提供程序来跟踪数据突变。当发生突变时，通过重置缓存的函数来使缓存失效。这涉及存储在突变时更改的版本或时间戳，并在 `fetch` 函数中检查此版本或时间戳。

       
       import React, { createContext, useContext, useState, experimental_useCache } from 'react';
  
       const DataVersionContext = createContext(null);
  
       export function DataVersionProvider({ children }) {
         const [version, setVersion] = useState(0);
         const invalidate = () => setVersion(v => v + 1);
  
         return (
           
             {children}
           
         );
       }
  
       async function fetchData(version) {
          console.log("Fetching data with version:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Data for version ${version}` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // Invoke the cache
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // Example Usage:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return Invalidate Cache
       }
  
       // Wrap your App with DataVersionProvider
       // 
       //   
       //   
       // 
       
       

• 基于时间的过期：实施缓存过期机制，该机制会在一段时间后自动使缓存失效。这对于相对静态但可能偶尔更改的数据非常有用。
• 基于标签的失效：将标签与缓存的数据相关联，并根据这些标签使缓存失效。这对于在特定数据发生更改时使相关数据失效非常有用。
• WebSocket 和实时更新：如果您的应用程序使用 WebSocket 或其他实时更新机制，则可以使用这些更新来触发缓存失效。当收到实时更新时，使受影响数据的缓存失效。

使用 experimental_useCache 的最佳实践

为了有效地利用 experimental_useCache 并避免潜在的陷阱，请遵循以下最佳实践：

• 将其用于昂贵的操作：仅将 experimental_useCache 用于真正昂贵的操作，例如数据获取或复杂的计算。由于缓存管理的开销，缓存廉价操作实际上可能会降低性能。
• 定义清晰的缓存键：确保传递给缓存函数的参数唯一地标识要缓存的数据。这对于确保缓存正常工作并且数据不会被意外重用至关重要。对于对象参数，请考虑序列化和哈希它们以创建一致的键。
• 实施缓存失效策略：如前所述，您需要实施自己的策略来在底层数据更改时使缓存失效。选择适合您的应用程序和数据的策略。
• 监控缓存性能：监控缓存的性能以确保它按预期工作。使用日志记录和调试工具来跟踪缓存命中和未命中，并识别潜在的瓶颈。
• 考虑替代方案：在使用 experimental_useCache 之前，请考虑其他缓存解决方案是否更适合您的需求。例如，如果您需要更强大的缓存解决方案，其中包含缓存失效和驱逐等内置功能，您可以考虑使用专用缓存库。像 `react-query`、`SWR` 这样的库，甚至使用 `localStorage` 有时可能更合适。
• 从小处着手：在您的应用程序中逐步引入 experimental_useCache。首先缓存一些关键的数据获取操作，并在获得更多经验后逐步扩展其使用。
• 记录您的缓存策略：清楚地记录您的缓存策略，包括正在缓存哪些数据、如何使缓存失效以及任何潜在的限制。这将使其他开发人员更容易理解和维护您的代码。
• 彻底测试：彻底测试您的缓存实现，以确保它正常工作并且没有引入任何意外的错误。编写单元测试以验证缓存是否按预期填充和失效。

experimental_useCache 的替代方案

虽然 experimental_useCache 提供了一种在 React 中管理缓存的便捷方法，但它不是唯一可用的选项。其他几种缓存解决方案可用于 React 应用程序，每种解决方案都有其自身的优点和缺点。

• useMemo：useMemo hook 可用于记忆昂贵计算的结果。虽然它没有提供跨渲染的真正缓存，但它对于优化单个组件中的性能非常有用。它不太适合数据获取或需要跨组件共享数据的场景。
• React.memo：React.memo 是一个高阶组件，可用于记忆函数组件。如果组件的 props 没有更改，它会阻止组件重新渲染。在某些情况下，这可以提高性能，但它不提供数据缓存。
• 外部缓存库 (react-query, SWR)：像 react-query 和 SWR 这样的库为 React 应用程序提供全面的数据获取和缓存解决方案。这些库提供自动缓存失效、后台数据获取和乐观更新等功能。如果您需要具有高级功能的更强大的缓存解决方案，它们可能是一个不错的选择。
• 本地存储/会话存储：对于更简单的用例或跨会话持久化数据，可以使用 `localStorage` 或 `sessionStorage`。但是，需要手动管理序列化、失效和存储限制。
• 自定义缓存解决方案：您还可以使用 React 的 context API 或其他状态管理技术构建自己的自定义缓存解决方案。这使您可以完全控制缓存实现，但它也需要更多的努力和专业知识。

结论

React 的 experimental_useCache hook 提供了一种强大而便捷的方式来管理 React 应用程序中的缓存。通过缓存昂贵操作的结果，您可以显着提高性能、减少网络请求并简化您的数据获取逻辑。当与 Suspense 和 React Server Components 结合使用时，experimental_useCache 可以进一步增强用户体验并优化服务器渲染性能。

但是，重要的是要了解 experimental_useCache 的局限性和潜在的缺点，例如缺乏内置的缓存失效以及可能增加的内存使用量。通过遵循本指南中概述的最佳实践并仔细考虑您的应用程序的特定需求，您可以有效地利用 experimental_useCache 来释放显着的性能提升并提供更好的用户体验。

请记住随时了解 React 实验性 API 的最新更新，并准备好在必要时调整您的代码。随着 React 的不断发展，像 experimental_useCache 这样的缓存技术将在构建高性能和可扩展的 Web 应用程序中发挥越来越重要的作用。