react useMeno useCallback

在React开发中，useMemo 和 useCallback 是用于性能优化的两个重要Hook。下面通过一个对比表格让你快速抓住它们的核心区别，然后我会详细解释它们的用法和提供实际案例。

特性 useMemo useCallback

缓存目标值（计算结果、对象、数组）函数本身

主要用途避免昂贵的重复计算；稳定子组件的引用类型props 稳定函数的引用，避免因其变化导致子组件不必要的重渲染

返回值记忆化后的值记忆化后的函数

等效关系 - useCallback(fn, deps) 等效于 useMemo(() => fn, deps)

💡 详解 useMemo：缓存昂贵的计算结果

useMemo 的核心作用是缓存一个计算成本较高的结果，只有当其依赖项发生变化时，才会重新计算。

基本语法
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 第一个参数：一个工厂函数，返回你想要缓存的值。

• 第二个参数：一个依赖数组。只有当数组中的某个依赖项发生变化时，工厂函数才会重新执行。

• 返回值：记忆化后的值。

详细使用案例

• 场景一：优化复杂计算

当组件中存在需要频繁执行且消耗大量资源的操作（如数学计算、大型数据集的转换或过滤）时，使用 useMemo 可以显著提升性能。

import { useMemo, useState } from 'react';

复制代码

function ExpensiveComponent({ items }) {
  const [filter, setFilter] = useState('');

  // 使用 useMemo 缓存复杂的计算逻辑
  const expensiveValue = useMemo(() => {
    console.log('执行昂贵的计算...'); // 用于观察计算是否触发
    // 模拟一个耗时的计算：过滤并求和
    return items
      .filter(item => item.name.includes(filter))
      .reduce((acc, item) => acc + item.value, 0);
  }, [items, filter]); // 依赖项：当 items 或 filter 变化时重新计算

  return (
    <div>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} />
      <p>计算结果: {expensiveValue}</p>
    </div>
  );
}

效果：当输入框内容（filter）改变时，计算会重新执行。但如果父组件传递的 items 没有变化，而只是组件其他无关状态更新，expensiveValue 将直接返回缓存值，避免不必要的计算。

• 场景二：稳定对象引用

当需要将一个对象或数组作为props传递给被 React.memo 包裹的子组件时，使用 useMemo 可以确保该引用类型只在依赖变更时才会变化，从而避免子组件无效重渲染。

import { useMemo } from 'react';

复制代码

function ParentComponent({ user }) {
  // 使用 useMemo 稳定配置对象
  const userConfig = useMemo(() => ({
    avatar: user.avatarUrl,
    level: user.level > 5 ? 'VIP' : 'Standard'
  }), [user.avatarUrl, user.level]); // 依赖项：当 user.avatarUrl 或 user.level 变化时重新创建对象

  return <ChildComponent config={userConfig} />;
}

const ChildComponent = React.memo(({ config }) => {
  // 只有当 config 的引用真正改变时，这个组件才会重渲染
  return <div>{/* 使用 config */}</div>;
});

🎯 详解 useCallback：缓存函数定义

useCallback 用于缓存函数定义本身，确保在依赖项不变的情况下，函数身份保持不变。

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

• 第一个参数：你想要缓存的函数。

• 第二个参数：一个依赖数组。只有当数组中的某个依赖项发生变化时，函数才会被重新创建。

• 返回值：记忆化后的函数。

详细使用案例

• 场景一：优化子组件渲染（配合 React.memo）

当你将函数作为props传递给子组件（特别是用 React.memo 优化过的子组件）时，使用 useCallback 可以防止因为父组件重渲染导致函数引用变化，进而触发子组件的不必要重渲染。

import { useState, useCallback } from 'react';

复制代码

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // 使用 useCallback 缓存函数
  const handleIncrement = useCallback(() => {
    setCount(c => c + 1); // 使用函数式更新，避免依赖 count
  }, []); // 空依赖数组，因为 setCount 是稳定的，且使用了函数式更新

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>Count: {count}</p>
      <ChildComponent onIncrement={handleIncrement} />
    </div>
  );
}

const ChildComponent = React.memo(({ onIncrement }) => {
  console.log('子组件渲染了'); // 用于观察子组件是否重渲染
  return <button onClick={onIncrement}>增加</button>;
});

效果：当父组件中的 text 状态变化导致父组件重渲染时，handleIncrement 的引用保持不变，因此被 React.memo 包裹的 ChildComponent 不会重新渲染。

• 场景二：作为其他Hooks的依赖

当函数被用作其他Hook（如 useEffect）的依赖项时，使用 useCallback 可以避免因函数引用变化导致 useEffect 频繁执行。

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

复制代码

function DataFetcher({ userId }) {
  const [data, setData] = useState(null);

  // 使用 useCallback 缓存 fetchData 函数
  const fetchData = useCallback(async () => {
    const response = await fetch(`/api/user/${userId}`);
    const result = await response.json();
    setData(result);
  }, [userId]); // 依赖项：当 userId 变化时重新创建 fetchData

  useEffect(() => {
    fetchData();
  }, [fetchData]); // 依赖项：因为 fetchData 被 useCallback 缓存，所以 effect 只在 userId 变化时运行

  return <div>{/* 渲染数据 */}</div>;
}

⚠️ 重要注意事项与最佳实践

避免滥用：不是所有函数和值都需要记忆化。记忆化本身也有性能开销（比较依赖项）。应优先用于可衡量的性能瓶颈，如确实昂贵的计算、已导致渲染问题的组件，或作为优化子组件（React.memo）的props传递的函数。
正确声明依赖项：务必在依赖数组中列出回调函数或计算值中所使用的所有会变化的变量（如state、props）。ESLint 的 eslint-plugin-react-hooks 插件可以帮助检查。遗漏依赖项是常见错误，会导致使用过期的值。
理解引用相等性：React 使用 Object.is 比较算法来对比依赖项的前后值。对于对象和数组，即使内容相同，但每次重新创建也被视为不同的依赖。
useCallback 与 useMemo 的关系：useCallback(fn, deps) 等价于 useMemo(() => fn, deps)。useCallback 缓存函数本身，而 useMemo 缓存的是函数调用的结果。

💎 总结

选择哪个Hook，取决于你的优化目标：

• 想缓存一个计算出来的值（如一个复杂的运算结果、一个对象）？用 useMemo。

• 想缓存一个函数，防止它被不必要的重新创建？用 useCallback。

希望这份详细的说明和案例能帮助你更好地理解和使用这两个Hook。如果你有更具体的场景想探讨，我很乐意提供进一步的分析。