useCallback，useMemo, React.memo的区别

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

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

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