面试题：React 中 useMemo 与 useCallback 的基本区别

Question

请阐述 React 里 useMemo 和 useCallback 在功能及应用场景上的基本区别。并举例说明在一个简单列表渲染组件中，何时适合使用 useMemo，何时适合使用 useCallback。

Answer 1

功能区别

1. useMemo：用于缓存一个值，只有当它的依赖项发生变化时才会重新计算。它返回的是一个经过缓存的值，主要用于优化计算开销较大的操作，避免在每次渲染时都重新计算。
2. useCallback：用于缓存一个函数，只有当它的依赖项发生变化时才会重新创建函数。它返回的是一个经过缓存的函数引用，主要用于避免在组件重新渲染时不必要的函数创建，从而防止子组件因函数引用变化而导致的不必要重新渲染。

应用场景区别

1. useMemo：适用于有复杂计算的场景，例如对大数据集进行排序、过滤或复杂的数学运算等，避免每次渲染都重复这些计算。
2. useCallback：适用于将函数作为 props 传递给子组件，并且子组件可能会因为函数引用变化而重新渲染的场景，如在 onClick 等事件处理函数传递给子组件时使用。

简单列表渲染组件示例

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

const ListItem = React.memo(({ item, onClick }) => {
  return (
    <li onClick={onClick}>
      {item}
    </li>
  );
});

const ListComponent = ({ data, filter }) => {
  // 使用 useMemo 来缓存过滤后的数据
  const filteredData = useMemo(() => {
    return data.filter(item => item.includes(filter));
  }, [data, filter]);

  // 使用 useCallback 来缓存点击处理函数
  const handleClick = useCallback((item) => {
    console.log(`Clicked on: ${item}`);
  }, []);

  return (
    <ul>
      {filteredData.map(item => (
        <ListItem key={item} item={item} onClick={() => handleClick(item)} />
      ))}
    </ul>
  );
};

export default ListComponent;

在这个例子中：

• useMemo：用于缓存 filteredData，只有当 data 或 filter 变化时才重新计算过滤后的数据，避免每次渲染都进行过滤操作。
• useCallback：用于缓存 handleClick 函数，确保每次渲染时传递给 ListItem 的 onClick 函数引用不变，避免 ListItem 不必要的重新渲染（因为 ListItem 使用了 React.memo）。