面试官：useMemo和useCallback有什么区别？我：就这？3分钟让你从入门到精通！

核心作用

useMemo：计算结果缓存器

功能：缓存组件中的复杂计算结果或函数返回值
特点：依赖项不变时直接返回缓存值，避免重复计算
典型场景：大数据处理、复杂转换、DOM节点引用

useCallback：函数实例缓存器

功能：缓存函数本身，保持引用稳定
特点：依赖项不变时返回相同函数引用
典型场景：事件处理器传递、子组件优化、第三方库集成

实战应用场景

useMemo最佳实践

import React, { useState, useMemo } from 'react';

function DataProcessor({ rawData }) {
  const [renderCount, setRenderCount] = useState(0);
  
  // 大数据处理：仅当rawData变化时重新计算
  const processedData = useMemo(() => {
    console.log('执行昂贵计算...');
    return rawData.map(item => ({
      ...item,
      fullName: `${item.firstName} ${item.lastName}`,
      score: Math.sqrt(item.score * 100)
    }));
  }, [rawData]);

  return (
    <div>
      <button onClick={() => setRenderCount(c => c + 1)}>
        重渲染 ({renderCount})
      </button>
      <ul>
        {processedData.slice(0, 5).map(item => (
          <li key={item.id}>{item.fullName}: {item.score.toFixed(2)}</li>
        ))}
      </ul>
    </div>
  );
}

useCallback典型用例

import React, { useState, useCallback } from 'react';

const ExpensiveChild = React.memo(({ onClick }) => {
  console.log('子组件渲染');
  return <button onClick={onClick}>提交</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState('');
  
  // 稳定函数引用：避免子组件不必要重渲染
  const handleSubmit = useCallback(() => {
    alert(`提交值: ${value}`);
  }, [value]);  // 仅当value变化时重建函数

  return (
    <div>
      <input 
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button onClick={() => setCount(c => c + 1)}>
        计数器: {count}
      </button>
      <ExpensiveChild onClick={handleSubmit} />
    </div>
  );
}

性能优化策略

useMemo优化要点

计算成本评估：仅对真正耗时的计算使用（如O(n²)复杂度以上）
依赖项精简：确保依赖数组只包含必要变量
引用类型处理：注意对象/数组字面量导致的无效重计算

useCallback优化要点

子组件配合：必须与React.memo搭配使用才有效果
依赖管理：包含所有函数内部使用的状态/属性
避免滥用：简单组件中可能反而增加内存开销

进阶使用技巧

组合使用模式

function SmartComponent({ items, filter }) {
  // 组合使用useMemo和useCallback
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  const handleSelection = useCallback((id) => {
    // 使用filteredItems
    const selected = filteredItems.find(item => item.id === id);
    console.log('选中:', selected);
  }, [filteredItems]);

  // ...渲染逻辑
}

性能测量对比

function Benchmark() {
  const [state, setState] = useState(0);
  
  // 未优化版本
  const normalCalc = () => {
    const start = performance.now();
    const result = expensiveFunction(state);
    console.log('普通计算耗时:', performance.now() - start);
    return result;
  };
  
  // useMemo优化版本
  const memoCalc = useMemo(() => {
    const start = performance.now();
    const result = expensiveFunction(state);
    console.log('useMemo计算耗时:', performance.now() - start);
    return result;
  }, [state]);

  return (
    <div>
      <button onClick={() => setState(s => s + 1)}>更新</button>
      <div>结果: {memoCalc}</div>
    </div>
  );
}

常见误区警示

过度优化：简单计算使用useMemo可能适得其反
依赖遗漏：忘记包含依赖项导致过期闭包
引用陷阱：直接修改依赖对象属性不会触发更新
内存泄漏：缓存大对象可能增加内存压力

通过合理应用这些优化技术，可以显著提升React应用的渲染性能，特别是在处理大型数据集或复杂组件树时效果更为明显。

1、主要作用

useMemo：主要用于缓存计算结果。它可以缓存组件中耗时的计算或者函数调用的结果，只有当依赖项发生变化时，才会重新计算并更新缓存。
useCallback：主要用于缓存函数本身。它返回一个函数，并且这个函数只有在其依赖项发生变化时才被重新创建。这有助于避免在每次渲染时都创建新的函数实例，尤其是作为props传递给子组件的函数。

2、使用场景

useMemo：适用于需要对复杂对象或大量数据进行计算的场景。例如，处理大数据集的排序、过滤或转换操作；集成第三方库时，缓存API调用的结果；获取DOM节点的引用，且依赖于某些状态或属性。

import React, { useState, useMemo } from 'react';
function ExpensiveComponent({ data }) {  const [count, setCount] = useState(0);
  // 使用useMemo缓存昂贵的计算结果  const expensiveResult = useMemo(() => {    // 模拟一个耗时的计算过程    let result = 0;    for (let i = 0; i < data.length; i++) {      result += data[i];    }    return result;  }, [data]); // 依赖项为data数组
  return (    <div>      <p>计数器：{count}</p>      <button onClick={() => setCount(count + 1)}>增加计数</button>      <p>昂贵的计算结果：{expensiveResult}</p>    </div>  );}
export default ExpensiveComponent;

只有当data数组发生变化时，useMemo才会重新执行计算并更新缓存的结果。

useCallback：适用于需要将事件处理器函数传递给子组件的场景。如果事件处理器依赖于某些prop或state，而这些prop或state又不经常变化，使用useCallback可以避免子组件不必要的重渲染。此外，它还适用于性能敏感的props导致的频繁重渲染优化，以及与非React库协同工作时确保函数的稳定性。