React useMemo和useCallback到底什么时候该用

React的useMemo和useCallback是两个强大的Hook，它们能帮你优化性能，避免不必要的计算和渲染。但很多人对它们感到困惑，不知道何时该用。本文将手把手教你，通过具体场景和代码示例，让你彻底搞懂它们的用法和区别。

核心概念

首先，理解这两个Hook的核心作用：记忆化（Memoization）。简单来说，就是“记住”上一次的计算结果或函数，只有当依赖项发生变化时，才重新计算或创建。

• useMemo：用于记忆化一个值。它会执行你传入的函数，并返回其结果。只有当依赖项数组中的值发生变化时，这个函数才会重新执行，否则返回上一次缓存的结果。
• useCallback：用于记忆化一个函数。它会返回一个记忆化的版本，只有当依赖项数组中的值发生变化时，才会创建一个新的函数实例，否则返回上一次的函数。

useMemo的使用场景

useMemo主要解决两个问题：避免昂贵计算和避免子组件不必要的重新渲染。

场景1：避免昂贵计算

当你的组件中有一个计算量很大、耗时很长的函数时，每次渲染都重新执行它会严重影响性能。useMemo可以确保这个函数只在必要时运行。

示例： 计算斐波那契数列（这是一个典型的昂贵计算）。

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

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

  // 一个非常耗时的计算函数
  const fibonacci = (n) => {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
  };

  // 使用useMemo记忆化计算结果
  const result = useMemo(() => {
    console.log('正在计算斐波那契数列...');
    return fibonacci(35); // 假设这是一个昂贵的计算
  }, []); // 空依赖数组意味着只计算一次

  return (
    <div>
      <h1>斐波那契数列结果: {result}</h1>
      <button onClick={() => setCount(count + 1)}>点击增加: {count}</button>
    </div>
  );
}

在这个例子中，无论你点击按钮多少次，fibonacci函数都只会执行一次。因为它的依赖项数组是空的，所以结果被永久缓存了。如果依赖项数组是[count]，那么每次count变化时，函数都会重新计算。

场景2：避免子组件不必要的重新渲染

当父组件传递一个计算后的值（如对象、数组）给子组件时，即使这个值本身没有变化，父组件重新渲染也会导致子组件重新渲染。useMemo可以确保只有当值真正变化时，子组件才会重新渲染。

示例： 父组件传递一个用户信息对象给子组件。

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

function UserProfile({ user }) {
  console.log('UserProfile 重新渲染了');
  return (
    <div>
      <h2>用户信息</h2>
      <p>姓名: {user.name}</p>
      <p>年龄: {user.age}</p>
    </div>
  );
}

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Alice');
  const [age, setAge] = useState(30);

  // 每次父组件渲染，user对象都会被重新创建
  // const user = { name, age };

  // 使用useMemo记忆化user对象，只有name或age变化时才重新创建
  const user = useMemo(() => {
    return { name, age };
  }, [name, age]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>增加计数: {count}</button>
      <button onClick={() => setName('Bob')}>修改姓名</button>
      <button onClick={() => setAge(31)}>修改年龄</button>
      <UserProfile user={user} />
    </div>
  );
}

在这个例子中，点击“增加计数”按钮时，ParentComponent会重新渲染，但user对象没有变化，所以UserProfile不会重新渲染。而点击“修改姓名”或“修改年龄”按钮时，user对象才会被重新创建，UserProfile才会重新渲染。

useCallback的使用场景

useCallback主要用于记忆化函数，同样可以避免子组件不必要的重新渲染，并且在某些场景下保持函数引用的稳定性。

场景1：避免子组件不必要的重新渲染（函数props）

当父组件传递一个函数给子组件时，每次父组件重新渲染，这个函数都会被重新创建，导致子组件重新渲染。useCallback可以确保只有当函数的依赖项变化时，才会创建新的函数实例。

示例： 父组件传递一个点击处理函数给子组件。

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

function ClickButton({ onClick }) {
  console.log('ClickButton 重新渲染了');
  return <button onClick={onClick}>点击我</button>;
}

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

  // 每次父组件渲染，handleClick都会被重新创建
  // const handleClick = () => {
  //   console.log('按钮被点击了');
  // };

  // 使用useCallback记忆化handleClick函数
  const handleClick = useCallback(() => {
    console.log('按钮被点击了');
  }, []); // 空依赖数组意味着函数永远不会改变

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>增加计数: {count}</button>
      <ClickButton onClick={handleClick} />
    </div>
  );
}

在这个例子中，点击“增加计数”按钮时，ParentComponent会重新渲染，但handleClick函数的引用没有变化，所以ClickButton不会重新渲染。

场景2：稳定函数引用

在某些情况下，你需要一个函数的引用保持不变，例如在useEffect的依赖项中。

示例： useEffect依赖一个函数。

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

function Timer() {
  const [time, setTime] = useState(0);

  // 每次组件渲染，fetchData都会被重新创建，导致useEffect每次都执行
  // const fetchData = () => {
  //   console.log('Fetching data...');
  //   // 模拟异步操作
  //   setTimeout(() => {
  //     console.log('Data fetched at', time);
  //   }, 1000);
  // };

  // 使用useCallback记忆化fetchData函数
  const fetchData = useCallback(() => {
    console.log('Fetching data...');
    // 模拟异步操作
    setTimeout(() => {
      console.log('Data fetched at', time);
    }, 1000);
  }, [time]); // 依赖time，只有time变化时才创建新函数

  useEffect(() => {
    console.log('useEffect 依赖项变化，执行...');
    fetchData();
  }, [fetchData]); // 依赖fetchData

  return (
    <div>
      <p>当前时间: {time}</p>
      <button onClick={() => setTime(time + 1)}>增加时间</button>
    </div>
  );
}

在这个例子中，useCallback确保了fetchData函数的引用只有在time变化时才会改变。因此，useEffect的依赖项fetchData只有在time变化时才会触发useEffect的重新执行，而不是每次组件渲染都执行。

关键区别与选择

useMemo和useCallback虽然功能相似，但用途不同。一个简单的记忆法是：

• 用 useMemo 记忆化值（计算结果、对象、数组）。
• 用 useCallback 记忆化函数。

实际上，useCallback(fn, deps) 等价于 useMemo(() => fn, deps)。你可以根据你的需求选择更语义化的一个。

选择建议：

1. 当你需要记忆化一个计算结果时，使用 useMemo。
2. 当你需要记忆化一个函数并传递给子组件或作为其他Hook的依赖时，使用 useCallback。
3. 不要过度使用。 React的渲染优化机制已经很强大，只有在确实出现性能问题时才考虑使用这两个Hook。滥用它们可能会增加代码复杂度，甚至导致性能下降。

常见误区与最佳实践

1. 误区：忘记添加依赖项。

   • 问题： 如果你的计算或函数依赖于组件内的某个状态或props，但你忘记在依赖项数组中添加它，那么即使这些依赖项变化了，useMemo或useCallback也不会重新计算或创建，导致使用过时的数据。
   • 最佳实践： 仔细检查你的依赖项数组，确保包含了所有可能影响计算或函数行为的变量。

2. 误区：添加不必要的依赖项。

   • 问题： 如果你添加了不必要的依赖项，会导致useMemo或useCallback在不需要的时候也重新计算或创建，失去了优化的意义。
   • 最佳实践： 只添加必要的依赖项。对于稳定不变的值，可以使用useRef或空依赖数组[]。

3. 误区：认为它们能阻止父组件的重新渲染。

   • 问题： useMemo和useCallback只能优化子组件的重新渲染，它们不能阻止父组件自身的重新渲染。
   • 最佳实践： 理解它们的局限性，专注于优化子组件的性能。

4. 最佳实践：使用ESLint插件。

   • React官方提供了eslint-plugin-react-hooks插件，它可以帮你检测useMemo和useCallback的依赖项是否正确。强烈建议在你的项目中启用它。