React-Performance-Optimization-memo-useMemo-useCallback

字数统计: 4.5k阅读时长: 18 min

 2026/08/01 

第93课：性能优化：`memo`、`useMemo`、`useCallback`——记忆化原理、引用相等、正确使用场景

React 的渲染模型默认是“自上而下，全量渲染”：当组件的 State 或 Props 变化时，该组件及其所有子组件都会重新渲染。对于小型应用，这完全不是问题；但对于包含大量组件树、昂贵计算或频繁更新的中型到大型应用，不必要的渲染会逐渐侵蚀性能。React 提供了三个核心的 记忆化（Memoization） API 来优化渲染性能：**React.memo** 用于跳过纯展示组件的重渲染；**useMemo** 用于缓存昂贵的计算结果；**useCallback** 用于稳定函数引用，避免子组件因回调函数变化而重新渲染。然而，记忆化并非“免费的午餐”——它本身有内存和比较开销，滥用反而可能降低性能。理解它们的底层原理（引用相等性检查）和正确的使用场景，才能精准优化，而非盲目给所有组件包裹 memo。

1. 渲染性能的核心矛盾：引用相等与重渲染

1.1 React 如何决定是否重渲染？

当父组件渲染时，React 会递归地渲染它的所有子组件——无论子组件的 Props 是否实际发生了变化。这种行为是 React 的默认行为。只有当你显式使用优化手段（React.memo、shouldComponentUpdate 或 PureComponent）时，React 才会在渲染子组件前进行浅比较（Shallow Comparison）：逐一比较新旧 Props 的每个字段，如果都相等（===），则跳过该子组件的渲染。

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <ExpensiveChild /> {/* 每次 Parent 渲染都会重新渲染 */}
    </div>
  );
}

每次点击按钮，Parent 的 State 变化导致自身重渲染，ExpensiveChild 也会无条件重新渲染——即使它的 Props 根本没有变化。

1.2 引用相等：为什么对象和函数导致“假性变化”？

JavaScript 中，对象、数组和函数的比较是基于引用而非内容的。两个内容完全相同的对象 { a: 1 } 并不相等（=== 比较引用地址）。这意味着如果父组件在每次渲染时都创建新的对象或函数传递给子组件，即使子组件使用了 React.memo，浅比较也会认为 Props 发生了变化，导致记忆化失效。

function Parent() {
  const [count, setCount] = useState(0);

  // 每次渲染都创建一个新的对象和新的函数！
  const style = { color: 'blue' };
  const handleClick = () => console.log('clicked');

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <MemoChild style={style} onClick={handleClick} />
    </div>
  );
}

即使 MemoChild 被 React.memo 包裹，因为 style 和 handleClick 每次渲染都是新的引用，MemoChild 仍然会重新渲染。这就是 useMemo 和 useCallback 要解决的核心问题——稳定引用。

2. `React.memo`：跳过纯展示组件的重渲染

React.memo 是一个高阶组件，它包裹一个函数组件，返回一个记忆化的版本。当父组件渲染时，React 会浅比较该组件的 Props——如果所有 Props 都与上一次渲染时相同（===），则跳过本次渲染，复用上一次的结果。

import { memo } from 'react';

const ExpensiveChild = memo(function ExpensiveChild({ data }) {
  console.log('ExpensiveChild 渲染');
  return <div>{data.map(item => <p key={item.id}>{item.name}</p>)}</div>;
});

2.1 `memo` 的适用场景

场景	是否使用 `memo`
组件接收相同的 Props 频繁渲染	✅ 推荐使用
组件渲染开销大（如渲染长列表、图表）	✅ 推荐使用
父组件频繁更新，但子组件 Props 不变	✅ 推荐使用
Props 每次都是新的对象/数组/函数	❌ 无效，需配合 `useMemo`/`useCallback`
组件本身渲染极快（如一个 `<span>`）	❌ 不需要，`memo` 的比较开销可能大于渲染开销

2.2 自定义比较函数

React.memo 接受第二个参数——一个自定义比较函数，用于精确控制何时跳过渲染。该函数接收 prevProps 和 nextProps，返回 true 表示“相等，跳过渲染”，返回 false 表示“不相等，重新渲染”。

const MemoChart = memo(Chart, (prevProps, nextProps) => {
  // 仅当 data 数组的引用相同时跳过渲染
  return prevProps.data === nextProps.data
    && prevProps.width === nextProps.width
    && prevProps.height === nextProps.height;
});

注意：自定义比较函数反转了直觉——返回 true 意味着不渲染。这与 shouldComponentUpdate 的逻辑一致。如果比较逻辑本身很复杂，自定义比较带来的开销可能超过跳过的渲染开销。

3. `useMemo`：缓存昂贵的计算结果

useMemo 用于缓存一个计算结果的返回值。它在首次渲染时计算并缓存该值，后续渲染中，仅当依赖数组中的某个值发生变化时才会重新计算。如果依赖未变，直接返回上次缓存的值。

import { useMemo, useState } from 'react';

function ProductList({ products, filter }) {
  // 昂贵的过滤和排序操作
  const filteredProducts = useMemo(() => {
    console.log('重新计算过滤结果');
    return products
      .filter(p => p.category === filter)
      .sort((a, b) => b.price - a.price);
  }, [products, filter]);

  return (
    <ul>
      {filteredProducts.map(p => (
        <li key={p.id}>{p.name} - ¥{p.price}</li>
      ))}
    </ul>
  );
}

3.1 `useMemo` 的适用场景

场景	是否使用 `useMemo`
对大型数组进行 `filter`/`sort`/`reduce` 操作	✅ 推荐
创建新的对象或数组作为 Props 传递给 `memo` 子组件	✅ 推荐（稳定引用）
计算本身极快（如简单加法、字符串拼接）	❌ 不需要
依赖数组频繁变化（缓存几乎每次都会失效）	❌ 谨慎，开销可能大于收益

3.2 `useMemo` 用于稳定引用

这正是 useMemo 与 React.memo 配合的关键场景。当父组件需要向子组件传递对象或数组 Props 时，使用 useMemo 包裹该对象的创建过程，确保只在依赖变化时创建新对象：

function Parent({ userId }) {
  const [count, setCount] = useState(0);

  // 稳定的对象引用：仅在 userId 变化时重新创建
  const config = useMemo(() => ({
    id: userId,
    theme: 'dark',
    retries: 3,
  }), [userId]);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <MemoChild config={config} />
    </div>
  );
}

3.3 `useMemo` 不是语义保证

React 官方文档明确指出：**useMemo 是一种性能优化，而非语义保证。React 在未来可能在某些情况下丢弃缓存值并重新计算（例如为释放内存）。因此，你的代码绝不能依赖** useMemo 来阻止某个副作用的执行——副作用应放在 useEffect 中。

4. `useCallback`：缓存函数引用

useCallback 是 useMemo 的特化版本——专门用于缓存函数引用。useCallback(fn, deps) 等价于 useMemo(() => fn, deps)。当依赖数组未变化时，返回的是上一次渲染时的同一个函数引用。

import { useCallback, useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  // 稳定的函数引用：仅在 count 变化时重新创建
  const handleClick = useCallback(() => {
    console.log('当前 count:', count);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <MemoChild onClick={handleClick} />
    </div>
  );
}

4.1 何时需要 `useCallback`？

传递给 memo 子组件的回调：如果子组件使用了 React.memo 进行优化，那么父组件传递的回调必须是稳定的引用，否则 memo 会因函数引用变化而失效。
作为自定义 Hook 的依赖：如果回调函数是某个 useEffect 或其他 Hook 的依赖项，使用 useCallback 可以防止 Hook 因函数引用变化而频繁执行。
传递给第三方库的回调：某些高性能库（如虚拟滚动、拖拽库）内部使用引用比较来跳过不必要的更新，需要稳定的回调引用。

4.2 不需要 `useCallback` 的场景

回调被传递给原生 HTML 元素：<button onClick={handleClick}> 不会因为函数引用变化而跳过渲染——HTML 元素不受 memo 影响。直接写内联箭头函数即可。
组件本身未被 memo 包裹：如果子组件每次都无条件渲染，传递稳定的函数引用没有意义。
依赖数组过多导致缓存频繁失效：如果 useCallback 的依赖几乎每次渲染都变化，它反而增加了创建和比较的开销。

4.3 `useCallback` 与闭包陷阱

useCallback 内部使用的 State 和 Props 同样遵循闭包规则——它捕获的是创建时的值。如果你在 useCallback 中依赖了某个 State 却没有将其加入依赖数组，函数内部读取的将永远是旧值。

// ❌ 错误：handleClick 捕获的是首次渲染时的 count
const handleClick = useCallback(() => {
  console.log(count); // 始终打印初始值
}, []); // 空依赖，count 被固化

// ✅ 正确：将依赖加入数组
const handleClick = useCallback(() => {
  console.log(count);
}, [count]);

如果既想保持函数引用稳定，又想读取最新的 State，可以结合 useRef 实现（见第 92 课）。

5. 性能优化的决策框架

在决定是否使用记忆化时，可以按以下流程判断：

确定瓶颈：使用 React DevTools 的 Profiler 录制交互，找到确实存在性能问题的组件，而非凭直觉猜测。
先优化 State 结构：将 State 下沉到尽可能低的组件中，避免高层组件频繁渲染。
再考虑记忆化：
- 如果子组件渲染开销大 → 用 React.memo 包裹。
- 如果子组件的 Props 包含每次渲染都重新创建的对象/数组 → 用 useMemo 稳定引用。
- 如果子组件的 Props 包含每次渲染都重新创建的回调函数 → 用 useCallback 稳定引用。
验证优化效果：再次使用 Profiler 对比优化前后的渲染次数和耗时。

黄金法则：在没有测量到性能问题之前，不要盲目使用记忆化。绝大多数情况下，React 的默认渲染已经足够快。过早优化不仅浪费时间，还会增加代码复杂度和潜在的 Bug（如依赖数组遗漏导致的状态不同步）。

6. 综合实战：带筛选的大列表组件

import { useState, useMemo, useCallback, memo } from 'react';

// 使用 memo 包裹列表项，避免每个项都重渲染
const ListItem = memo(function ListItem({ item, onSelect, isSelected }) {
  console.log('渲染 ListItem:', item.id);
  return (
    <li
      onClick={() => onSelect(item.id)}
      style={{
        background: isSelected ? '#e0e7ff' : 'transparent',
        padding: '8px',
        cursor: 'pointer',
      }}
    >
      {item.name} - ¥{item.price}
    </li>
  );
});

function ProductList({ products }) {
  const [filter, setFilter] = useState('all');
  const [selectedId, setSelectedId] = useState(null);
  const [sortOrder, setSortOrder] = useState('asc');

  // 1. useMemo 缓存过滤与排序结果
  const filteredAndSorted = useMemo(() => {
    console.log('重新计算列表');
    let result = products;
    if (filter !== 'all') {
      result = result.filter(p => p.category === filter);
    }
    result = [...result].sort((a, b) =>
      sortOrder === 'asc' ? a.price - b.price : b.price - a.price
    );
    return result;
  }, [products, filter, sortOrder]);

  // 2. useCallback 稳定回调引用，避免 ListItem 不必要的重渲染
  const handleSelect = useCallback((id) => {
    setSelectedId(id);
  }, []); // 空依赖：此函数不依赖任何外部变量

  return (
    <div>
      <div>
        <select value={filter} onChange={e => setFilter(e.target.value)}>
          <option value="all">全部分类</option>
          <option value="electronics">电子产品</option>
          <option value="books">图书</option>
        </select>
        <button onClick={() => setSortOrder(o => o === 'asc' ? 'desc' : 'asc')}>
          {sortOrder === 'asc' ? '价格升序' : '价格降序'}
        </button>
      </div>

      <ul>
        {filteredAndSorted.map(item => (
          <ListItem
            key={item.id}
            item={item}
            onSelect={handleSelect}
            isSelected={item.id === selectedId}
          />
        ))}
      </ul>
    </div>
  );
}

设计要点：

useMemo 缓存过滤和排序后的新数组，避免每次渲染都重新计算。
ListItem 被 memo 包裹，仅当 item、onSelect 或 isSelected 变化时才重新渲染。
handleSelect 使用 useCallback 稳定引用（空依赖），确保 ListItem 不会因回调变化而重渲染。
selectedId 变化仅导致两个 ListItem 重渲染（选中的和取消选中的），而非整个列表。

课后练习

一、概念自测（选择题 / 填空题）

（单选） React.memo 默认使用什么比较策略来决定是否跳过渲染？
A. 深度比较（Deep Equality）
B. 浅比较（Shallow Equality）
C. 引用比较（Reference Equality，仅比较 Props 对象引用）
D. 内容比较（通过 JSON.stringify）
（单选） useCallback(fn, deps) 的主要作用是什么？
A. 缓存函数的计算结果。
B. 缓存函数本身，保持引用稳定。
C. 阻止函数执行。
D. 在依赖变化时执行副作用。
（填空） useMemo(() => compute(a, b), [a, b]) 在依赖数组未变化时，返回的是 ______。
（多选） 以下哪些场景是使用 useMemo 的合理理由？
A. 对大型数组进行复杂的过滤和排序。
B. 创建传递给 memo 子组件的对象 Props。
C. 替代 useEffect 来执行数据获取。
D. 计算组件的 JSX 输出。

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要优化一个现有的 React 列表组件。该组件接收一个大型用户数组，支持按角色筛选和按姓名排序。当前实现每次选择筛选条件或排序时，整个列表（含每个用户项）都会重新渲染。要求使用 useMemo、useCallback 和 React.memo 进行优化：

使用 useMemo 缓存筛选和排序后的用户列表。
将用户项组件用 React.memo 包裹。
使用 useCallback 稳定传递给用户项组件的选中回调。
提供一个优化的前后对比注释，说明优化点。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成优化后的 React 组件代码。提示词中需明确指定缓存策略和优化目标。

三、Agent 模式下的提示词示例

你是一个资深前端开发 Agent。请优化一个现有的 React 用户列表组件。需要创建文件 src/components/OptimizedUserList.jsx：

接收 users 数组（包含 { id, name, role, email }）。

状态：role（筛选角色）、sortOrder（'asc' / 'desc'）、selectedId（选中的用户 ID）。

使用 useMemo 根据 users、role、sortOrder 生成筛选和排序后的列表。

将用户行提取为 UserRow 组件，使用 React.memo 包裹，接收 user、onSelect、isSelected 作为 Props。

使用 useCallback 稳定 onSelect 回调（仅 setSelectedId，空依赖）。

在代码中添加注释解释每个优化点的作用（为什么用 useMemo，为什么用 memo，为什么用 useCallback）。

提供优化前后的渲染对比说明（在文件顶部注释中）。
完成后输出完整文件内容。

四、面试真题与参考答案

题目（腾讯前端面试题）：

请详细解释 React 中 useMemo 和 useCallback 的作用及其区别。为什么说它们是“性能优化手段而非语义保证”？在什么情况下不恰当地使用它们反而会降低性能？请举例说明。

参考答案：

useMemo 用于缓存计算结果的返回值，当依赖数组未变化时跳过重复的昂贵计算，直接返回上一次缓存的值。useCallback 是 useMemo 的特化——它缓存的是函数本身，确保依赖不变时返回稳定的函数引用。两者的本质都是记忆化（Memoization），以减少不必要的计算或子组件重渲染。

它们之所以是“性能优化而非语义保证”，是因为 React 保留了在未来丢弃缓存值并重新计算的权力（如为了释放内存或在并发模式下）。开发者不能依赖 useMemo 来阻止某个操作的发生——该操作应该放在 useEffect 中。useMemo 仅是一个“建议”，React 在必要时可以忽略它。

不恰当使用反而会降低性能的情况：

**对极快计算使用 useMemo**：比较依赖数组的开销可能大于重新计算的成本。例如 useMemo(() => a + b, [a, b])，不如直接 a + b。
在每次渲染时都变化的依赖数组：如果依赖数组几乎每次渲染都不同，useMemo 缓存几乎总是失效，徒增比较开销。例如 useMemo(() => fn(), [Date.now()]) 毫无意义。
在没有 memo 的子组件上传递 useCallback 返回的函数：如果子组件没有记忆化，稳定的函数引用不会跳过任何渲染，反而增加了父组件的代码复杂度和 useCallback 自身的依赖管理开销。

课后练习答案

一、概念自测答案

B
- 解析：React.memo 默认进行浅比较，逐个比较新旧 Props 的属性值（使用 ===）。A 错误（非深度比较）；C 错误（不是仅比较 Props 对象本身的引用，而是比较内部属性）；D 错误。
B
- 解析：useCallback 缓存函数引用，在依赖不变时返回相同的函数。A 描述的是 useMemo；C、D 无关。
上一次缓存的计算结果
- 解析：当依赖不变时，useMemo 直接返回缓存值，不执行计算函数。
A、B
- 解析：A 正确，复杂计算使用 useMemo 避免重复运算；B 正确，稳定引用避免子组件重渲染。C 错误，数据获取是副作用，应使用 useEffect；D 错误，计算 JSX 输出是 React 默认行为，useMemo 可用于缓存 JSX 子树，但通常没有必要。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请优化一个 React 用户列表组件，使用 useMemo、useCallback 和 React.memo 减少不必要的渲染。要求：

users 数组通过 Props 传入。

使用 useMemo 根据筛选条件（role）和排序（sortOrder）缓存处理后的列表。

将用户项提取为 UserRow 组件，用 React.memo 包裹。

使用 useCallback 稳定选中回调。

在注释中说明每个优化点的理由。输出完整组件代码。”

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/07/31/React-Performance-Opt/

发表日期：July 31st 2026, 5:00:00 pm

更新日期：July 28th 2026, 10:27:15 am

Next Post

React-useReducer-and-State-Logic-Extraction
Previous Post

React-useRef-DOM-Operations-forwardRef-useImperativeHandle

CATALOG

1. 第93课：性能优化：memo、useMemo、useCallback——记忆化原理、引用相等、正确使用场景