React.memo 和useMemo 的区别

React.memo 和 useMemo 都是 React 中的性能优化工具，但它们的用途和工作原理不同。以下是它们的主要区别：

1. React.memo

React.memo 是一个高阶组件（HOC），用于优化组件的渲染，防止不必要的重新渲染。当组件的 props 没有变化时，React.memo 会阻止组件的重新渲染。

• 主要用途：
  用于组件级别的性能优化。
  缓存组件的渲染结果，避免因父组件重新渲染而导致不必要的子组件渲染。
  它是一个包裹组件的高阶函数。

• 工作原理：
  React.memo 会对比当前渲染和之前的 props，如果 props 没有变化，它就跳过重新渲染。如果 props 发生变化，则会重新渲染组件。

• 使用示例：

const MyComponent = React.memo(({ count }: { count: number }) => {
  console.log('Rendering MyComponent');
  return <div>{count}</div>;
});

在父组件的重新渲染时，MyComponent 只有在 count 发生变化时才会重新渲染。

可以传递自定义比较函数：

const MyComponent = React.memo(
  ({ count }: { count: number }) => {
    console.log('Rendering MyComponent');
    return <div>{count}</div>;
  },
  (prevProps, nextProps) => prevProps.count === nextProps.count // 自定义比较函数
);

2. useMemo

useMemo 是一个 React Hook，用于在函数组件内部缓存计算结果。它的作用是缓存某个计算值，避免每次渲染时都重新执行计算。

• 主要用途：
  用于缓存计算值，避免在每次渲染时都执行开销较大的计算。
  useMemo 返回缓存的值，只有在依赖项发生变化时才会重新计算。

• 工作原理：
  useMemo 会根据传递的依赖数组进行比较。如果依赖项没有变化，useMemo 会返回缓存的结果。如果依赖项发生变化，它就会重新计算结果。

• 使用示例：

import React, { useMemo } from 'react';

const ExpensiveComponent = ({ num }: { num: number }) => {
  const expensiveCalculation = useMemo(() => {
    console.log('Expensive calculation...');
    return num * 2; // 假设这个计算非常耗时
  }, [num]); // 依赖项为 num，只有 num 发生变化时才会重新计算

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

在这个例子中，只有当 num 发生变化时，expensiveCalculation 才会重新计算，否则会使用上次计算的缓存值。

3.主要区别总结：

4.何时使用：

使用 React.memo 当你想要优化子组件的渲染性能时，特别是在传递给子组件的 props 没有变化时。
使用 useMemo 当你有一个计算开销大的值，并且这个值的计算依赖于某些特定的 props 或 state 时。