如何实现useMemo缓存结果跨同一组件多实例共享？

这个问题我之前也碰到过！useMemo确实只能在单个组件实例内复用缓存，跨实例就失效了——毕竟它的缓存是和组件实例绑定的，每个实例都会维护自己的缓存空间。不过针对你的场景（纯函数+少量唯一输入），有几个简洁又可持续的方案，能让所有组件实例共享同一个缓存：

方案一：模块级全局缓存（最简洁） #

利用JavaScript模块的单例特性，创建一个全局的缓存容器，把查询结果存在里面。因为模块在整个应用中只会加载一次，所以所有组件实例都会共享这个缓存。

实现步骤： #

1. 创建一个单独的工具模块，封装缓存逻辑：

// utils/queryCache.js
// 用Map存储输入和结果的映射
const queryCache = new Map();

// 序列化输入生成唯一key，处理基本类型和对象
const generateCacheKey = (input) => {
  if (typeof input === 'string' || typeof input === 'number' || typeof input === 'boolean') {
    return String(input);
  }
  // 如果输入是对象，转成JSON字符串（注意：输入不能包含函数/循环引用）
  return JSON.stringify(input);
};

// 封装带缓存的查询函数
export const memoizedQuery = (input) => {
  const key = generateCacheKey(input);
  
  if (queryCache.has(key)) {
    return queryCache.get(key);
  }
  
  // 执行高开销的浏览器查询
  const result = expensiveBrowserQuery(input);
  queryCache.set(key, result);
  
  return result;
};

// 可选：添加缓存清理方法（如果需要刷新缓存）
export const clearQueryCache = () => queryCache.clear();

2. 在组件中直接使用这个函数，不需要再用useMemo：

import { memoizedQuery } from '../utils/queryCache';

const MyComponent = ({ input }) => {
  // 所有组件实例用相同输入时，都会复用缓存的结果
  const queryResult = memoizedQuery(input);
  
  return (
    <div>
      {/* 渲染查询结果 */}
    </div>
  );
};

这个方案的优势是零React依赖、代码极简，完全利用JS本身的特性，性能最优。只要你的查询是纯函数（相同输入必返回相同结果），这个方案就非常安全。

方案二：React Context共享缓存（更灵活） #

如果需要缓存和React组件树绑定（比如微前端场景下隔离不同应用的缓存，或者测试时方便替换缓存），可以用Context来实现全局共享的缓存。

实现步骤： #

1. 创建Context和自定义Hook：

// hooks/useMemoizedQuery.js
import { createContext, useContext, useMemo } from 'react';

// 创建缓存Context，默认值是一个空Map
const QueryCacheContext = createContext(new Map());

// 缓存Provider，确保缓存实例稳定
export const QueryCacheProvider = ({ children }) => {
  const cache = useMemo(() => new Map(), []);
  
  return (
    <QueryCacheContext.Provider value={cache}>
      {children}
    </QueryCacheContext.Provider>
  );
};

// 自定义Hook，封装缓存逻辑
export const useMemoizedQuery = (input) => {
  const cache = useContext(QueryCacheContext);
  const key = useMemo(() => {
    // 同样生成唯一key
    if (typeof input === 'string' || typeof input === 'number' || typeof input === 'boolean') {
      return String(input);
    }
    return JSON.stringify(input);
  }, [input]);
  
  // 用useMemo确保只有key变化时才重新计算
  return useMemo(() => {
    if (cache.has(key)) {
      return cache.get(key);
    }
    
    const result = expensiveBrowserQuery(input);
    cache.set(key, result);
    return result;
  }, [cache, key, input]);
};

2. 在应用根组件中包裹Provider：

import { QueryCacheProvider } from './hooks/useMemoizedQuery';

function App() {
  return (
    <QueryCacheProvider>
      {/* 你的组件树，包括所有MyComponent实例 */}
    </QueryCacheProvider>
  );
}

3. 在组件中使用自定义Hook：

import { useMemoizedQuery } from '../hooks/useMemoizedQuery';

const MyComponent = ({ input }) => {
  const queryResult = useMemoizedQuery(input);
  
  return (
    <div>
      {/* 渲染查询结果 */}
    </div>
  );
};

这个方案的优势是缓存和React生态深度集成，可以方便地在不同组件树中隔离缓存，也更容易进行单元测试（比如在测试中替换Context的缓存实例）。

为什么useMemo做不到？ #

再补充一下：useMemo的设计初衷是优化单个组件的渲染性能，它的缓存存储在组件实例的内部状态中，每个组件实例都会维护自己的useMemo缓存表。所以即使不同实例的依赖项完全相同，它们的useMemo缓存也是相互独立的，自然无法共享。

内容的提问来源于stack exchange，提问作者edgerunner