React性能优化之useMemo与useCallback原理详解

一、问题背景与核心概念

在React函数组件中，每次组件重新渲染时，其内部的函数、变量和对象都会被重新创建。如果这些内容依赖的计算成本较高，或作为props传递给子组件，可能会导致不必要的子组件重渲染，从而影响性能。useMemo和useCallback是React提供的两个Hook，用于通过缓存优化性能。

1. 核心区别

• useMemo：缓存计算结果（值），如复杂计算、对象或数组。
• useCallback：缓存函数本身，避免函数重复创建。

二、useMemo原理与使用场景

1. 基本语法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 第一个参数是计算函数，返回需要缓存的值。
• 第二个参数是依赖数组，只有当依赖项变化时，才重新执行计算函数。

2. 底层原理

• React在组件首次渲染时执行计算函数，并将结果与依赖项存储在一个内部缓存中。
• 每次组件重渲染时，React会对比当前依赖项与上一次的依赖项（使用Object.is比较）。
• 如果依赖项未变化，直接返回缓存值；否则重新执行计算并更新缓存。

3. 使用场景示例

// 场景1：复杂计算优化
const expensiveValue = useMemo(() => {
  return heavyCalculation(data); // 耗时计算
}, [data]);

// 场景2：避免子组件不必要的重渲染
const config = useMemo(() => ({ color: theme, size: size }), [theme, size]);
return <ChildComponent config={config} />;

注意：若计算本身很简单，无需使用useMemo，因为缓存本身也有性能开销。

三、useCallback原理与使用场景

1. 基本语法

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

• 等价于useMemo(() => fn, deps)，即useCallback(fn, deps)等同于useMemo(() => fn, deps)。

2. 底层原理

• 与useMemo类似，但缓存的是函数引用。
• 依赖项变化时返回新函数，否则返回缓存的函数。

3. 使用场景示例

// 避免子组件因函数props变化而重渲染
const handleClick = useCallback(() => {
  setCount(count + 1);
}, [count]);

return <Button onClick={handleClick} />;

// 配合React.memo使用
const Button = React.memo(({ onClick }) => {
  return <button onClick={onClick}>Click</button>;
});

关键点：useCallback需结合React.memo使用才有意义，否则子组件仍会默认重渲染。

四、常见误区与最佳实践

1. 误区分析

• 过度使用：缓存本身有开销，轻量计算或函数无需缓存。
• 依赖项错误：遗漏依赖项可能导致闭包问题（如函数内使用过期状态）。
• 滥用空依赖数组：useCallback(fn, [])会导致函数始终使用初始状态，需确保逻辑允许。

2. 最佳实践

• 优先使用useMemo缓存对象或计算结果，避免子组件因引用变化重渲染。
• 仅在需要保持函数引用稳定时（如作为useEffect依赖或子组件的props）使用useCallback。
• 配合开发者工具（如React DevTools的Profiler）分析性能瓶颈。

五、与React.memo的协同优化

React.memo对函数组件进行浅比较，避免无效重渲染：

const Child = React.memo(({ value, onClick }) => {
  // 仅当props变化时重渲染
});

const Parent = () => {
  const value = useMemo(() => [1, 2, 3], []);
  const onClick = useCallback(() => {}, []);
  return <Child value={value} onClick={onClick} />;
};

三者结合可有效减少渲染次数，但需根据实际场景权衡使用。

总结

useMemo和useCallback通过缓存机制优化React函数组件的性能，但其本质是“以空间换时间”，需在确有性能需求时使用。理解其原理、依赖项比较逻辑及与React.memo的配合，是避免过度优化或误用的关键。