useCallback，useMemo, React.memo的区别

 

同：useCallback，useMemo和React.memo是三个在React中用于优化性能的方法。它们的主要目标是避免不必要的重新渲染和计算。因为当一个组件的状态发生变化时，React会重新渲染整个组件树。用这三个hook和组件，可以提升性能。

 

异：下面从属性，接收参数，返回值，意义和案例等方面进行详细地讲解。

useCallback，useMemo, React.memo的区别

	属性	接收参数	返回值	意义
useCallback	React Hook	函数 - 需要被记忆的函数 依赖数组 - 当其中一个依赖发生变化时，函数将被重新创建。	useCallback返回一个记忆化的函数，这个函数在依赖数组中的值发生变化时才会重新创建。	useCallback主要用于避免不必要的重新渲染，特别是当一个组件接收一个函数作为prop时。如果一个函数在每次渲染时都被重新创建，那么它可能导致子组件不必要地重新渲染。具体请见例1。
useMemo	React Hook	计算函数 - 返回需要被记忆的值 依赖数组 - 当其中一个依赖发生变化时，值将被重新计算	useMemo返回一个记忆化的值，这个值在依赖数组中的值发生变化时才会重新计算。	useMemo用于避免在每次渲染时都重新计算昂贵的计算结果。当计算过程非常耗费资源时，使用useMemo可以提高性能。具体请见例2
React.memo	高阶组件	一个React组件	返回一个包装后的新组件，该组件仅在接收到的props发生变化时才会重新渲染。	React.memo用于避免不必要的重新渲染，当组件的props没有发生变化时，它可以阻止组件重新渲染。这对于性能优化尤其有用。具体请见例3

 *useCallback 和 useMemo 参数相同，第一个参数是函数，第二个参数是依赖项的数组。主要区别是 React.useMemo 将调用 fn 函数并返回其结果，而 React.useCallback 将返回 fn 函数而不调用它。

例1

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <Child onClick={handleClick} />
    </div>
  );
}

function Child({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

 

例2

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

function App() {
  const [count, setCount] = useState(0);
  const expensiveResult = useMemo(() => {
    // 复杂的计算过程...
  }, [count]);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <div>{expensiveResult}</div>
    </>
  );
}

 

例3

import React from 'react';

function Child({ value }) {
  // ...
}

const MemoizedChild = React.memo(Child);

function Parent() {
  // ...
  return (
    <>
      <MemoizedChild value={value} />
    </>
  );
}