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

__EOF__

本文作者：chenyiliu
本文链接：https://www.cnblogs.com/chenyiliu/p/17393988.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！