当前位置：首页 > article >正文

React.memo 和useMemo 的区别

article 2024/12/5 3:40:03

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>;
};