合理使用 React 记忆缓存技术（ React.memo、 useMemo、 useCallback）的核心原则是： 只在确实能提升性能时使用，避免过早优化和过度使用。以下是具体的使用指南和最佳实践：

一、先诊断性能问题，再决定是否使用

记忆缓存不是银弹，它本身有额外的计算开销（比较依赖、存储缓存等）。因此，先通过 React DevTools 的 Profiler 工具找到真正的性能瓶颈，再针对性优化：

• 识别频繁重渲染的组件（尤其是列表项、复杂表单等）
• 定位耗时的计算逻辑（如大数据处理、复杂过滤排序等）
• 确认这些操作确实影响了用户体验（如卡顿、延迟）

二、针对不同场景合理选择 API

1. React.memo：缓存组件，避免不必要的重渲染

适用场景：

• 组件本身渲染成本高（如包含大量 DOM 元素、复杂计算）
• 组件会频繁重渲染，且大多数时候 props 没有实际变化
• 组件接收的 props 是简单值（字符串、数字、布尔值）或稳定引用（通过 useCallback/useMemo 缓存的对象/函数）

不适用场景：

• 组件渲染成本低（简单的 div 或文本）
• props 频繁变化（如每次渲染都收到新的对象/函数）
• 组件内部有频繁变化的状态（useState/useContext），此时即使 props 不变，组件也会重渲染

示例：

// 适合缓存：列表项组件，渲染成本高且 props 稳定
const MemoizedListItem = React.memo(({ item, onDelete }) => {
  // 复杂的渲染逻辑...
  return <div>{item.name}</div>;
});

// 使用时配合 useCallback 确保 onDelete 引用稳定
function List({ items }) {
  const onDelete = useCallback((id) => { /* 处理删除 */ }, []);
  return (
    <ul>
      {items.map(item => (
        <MemoizedListItem key={item.id} item={item} onDelete={onDelete} />
      ))}
    </ul>
  );
}

2. useMemo：缓存计算结果，避免重复计算

适用场景：

• 有昂贵的计算逻辑（如处理大型数组、复杂数学运算、解析大 JSON 等）
• 计算结果在依赖不变时会重复使用（如作为子组件的 props 或用于渲染）

不适用场景：

• 简单计算（如 a + b），缓存的开销可能大于计算本身
• 依赖频繁变化（如每次渲染依赖都不同，缓存会失效，反而浪费资源）

示例：

function DataTable({ data, filter }) {
  // 缓存过滤后的结果：当 data 或 filter 变化时才重新计算
  const filteredData = useMemo(() => {
    // 昂贵的过滤操作（假设 data 是大型数组）
    return data.filter(item => item.value > filter);
  }, [data, filter]);

  return (
    <table>
      {filteredData.map(item => (/* 渲染行 */))}
    </table>
  );
}

3. useCallback：缓存函数引用，稳定 props

适用场景：

• 函数作为 props 传递给被 React.memo 缓存的子组件（避免因函数引用变化导致子组件重渲染）
• 函数被用作 useEffect 的依赖（确保依赖稳定，避免不必要的副作用执行）

不适用场景：

• 函数仅在当前组件内部使用，且不涉及依赖数组
• 函数依赖频繁变化（如依赖一个经常更新的状态）

示例：

function Parent() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: "Alice" });

  // 缓存函数：依赖不变时，函数引用不变
  const handleUserUpdate = useCallback((newName) => {
    setUser(prev => ({ ...prev, name: newName }));
  }, []); // 不依赖外部变量，空依赖

  // 即使 count 变化，handleUserUpdate 引用不变，MemoizedChild 不会重渲染
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <MemoizedChild onUpdate={handleUserUpdate} user={user} />
    </>
  );
}

三、关键注意事项

1. 依赖数组必须准确
   所有在 useMemo/useCallback 中使用的外部变量都必须加入依赖数组，否则可能使用过时的值（闭包陷阱）。
   错误示例：

   const [a, setA] = useState(0);
   // 错误：依赖了 a 却未加入依赖数组，缓存结果永远是初始值 0
   const result = useMemo(() => a * 2, []); 
   

2. 避免缓存所有东西

   • 不要对简单组件（如按钮、标签）使用 React.memo
   • 不要对简单计算（如 x + y）使用 useMemo
   • 不要对所有函数都用 useCallback，仅处理作为 props 传递给缓存组件的函数

3. 对象/数组的引用问题
   即使内容相同，每次渲染创建的新对象/数组（如 { a: 1 }、[1, 2]）会被视为不同的引用，导致缓存失效。此时需用 useMemo 缓存：

   // 错误：每次渲染都会创建新对象，导致 MemoizedChild 重渲染
   return <MemoizedChild config={{ theme: "dark" }} />;
   
   // 正确：缓存对象引用
   const config = useMemo(() => ({ theme: "dark" }), []);
   return <MemoizedChild config={config} />;
   

4. React 可能丢弃缓存
   缓存是"最佳努力"的，React 在内存不足或其他情况下可能清除缓存，因此不能依赖缓存来存储关键状态或副作用逻辑。

四、总结：记忆缓存的使用优先级

1. 先优化代码本身（如减少不必要的状态、拆分大型组件）
2. 对频繁重渲染的昂贵组件使用 React.memo
3. 对传递给缓存组件的函数使用 useCallback
4. 对昂贵计算使用 useMemo

记住：清晰的代码结构和合理的组件拆分，往往比记忆缓存更能提升性能。只有当确实存在性能问题时，再针对性地应用这些技术。