React.memo和useMemo的区别是什么？

React.memo 和 useMemo 是 React 中用于性能优化的两种工具，但它们的使用场景和功能却有所不同。以下是它们的主要区别：

1. 定义和用途

React.memo

• 定义：React.memo 是一个高阶组件，用于优化函数组件。它通过对比组件的 props，决定是否重新渲染该组件。
• 用途：主要用于防止不必要的渲染，提升函数组件的性能。

示例：

const MyComponent = React.memo(({ data }) => {
  // 仅在 props.data 变化时重新渲染
  return <div>{data}</div>;
});

useMemo

• 定义：useMemo 是一个 Hook，用于缓存计算结果，避免在每次渲染时执行耗时的计算。
• 用途：主要用于优化性能，尤其是对昂贵的计算结果进行缓存。

示例：

const MyComponent = ({ data }) => {
  const computedValue = useMemo(() => {
    // 进行昂贵的计算
    return expensiveCalculation(data);
  }, [data]);

  return <div>{computedValue}</div>;
};

2. 适用范围

React.memo

• 适用于函数组件的优化。
• 主要针对组件的渲染过程进行优化。

useMemo

• 适用于函数组件内部的计算优化。
• 主要针对特定计算逻辑的优化，而不是整个组件的渲染。

3. 工作方式

React.memo

• 在组件接收新的 props 时，React.memo 会对比当前的 props 和之前的 props。
• 如果 props 没有变化，则跳过渲染，直接使用上一次渲染的结果。

useMemo

• useMemo 会在每次组件渲染时执行其传入的函数，计算并返回结果。
• 只有当依赖项发生变化时，才会重新计算；否则，它会返回上一次的计算结果。

4. 例子总结

• React.memo：用于包裹整个组件，防止不必要的重新渲染。

const MemoizedComponent = React.memo(MyComponent);

• useMemo：用于缓存特定计算结果，减少计算开销。

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

总结

• React.memo 用于优化函数组件的渲染，避免不必要的渲染。
• useMemo 用于缓存计算结果，避免重复计算。