useCallback、useMemo、 和useEffect都是 React 提供的 hooks，但是它们的用途不同，使用场景也不同。

useCallback

useCallback用于记忆函数，这意味着它返回回调函数的记忆版本，该版本仅在其中一个依赖项发生变化时才会更改。它有助于通过防止依赖于回调函数的组件不必要的重新渲染来优化性能。

何时使用useCallback：

• 当将回调传递给依赖父级状态或 props 的子组件时。
• 当你想要防止因将新的函数引用作为 props 传递而导致的不必要的重新渲染时。

例子：

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

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Memoize the increment function so it doesn't change on re-renders
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent increment={increment} />
    </div>
  );
};

const ChildComponent = ({ increment }) => {
  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

useMemo

useMemo用于记忆昂贵计算的结果，这意味着只有当其中一个依赖项发生变化时，它才会重新计算该值。它有助于优化性能，避免对不经常更改的值进行不必要的重新计算。

何时使用useMemo：

• 当计算基于其他不经常变化的值的值时。
• 在组件内呈现大型列表或执行复杂计算时。

例子：

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

const Fibonacci = ({ n }) => {
  const calculateFibonacci = (n) => {
    if (n <= 1) return n;
    return calculateFibonacci(n - 1) + calculateFibonacci(n - 2);
  };

  // Memoize the result of the expensive Fibonacci calculation
  const result = useMemo(() => calculateFibonacci(n), [n]);

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

const App = () => {
  const [num, setNum] = useState(10);

  return (
    <div>
      <input value={num} onChange={(e) => setNum(parseInt(e.target.value))} />
      <Fibonacci n={num} />
    </div>
  );
};

useEffect

useEffect用于在函数组件中执行副作用，例如获取数据、订阅事件或手动与 DOM 交互。它在每次渲染后运行，并且可以选择自行清理。

何时使用useEffect：

• 从 API 获取数据。
• 订阅事件或计时器。
• 手动与 DOM 交互。

例子：

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval); // Clean up the interval when the component unmounts
  }, []); // Empty dependency array ensures the effect runs only once

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

const App = () => {
  return (
    <div>
      <Timer />
    </div>
  );
};

概括：

• useCallback：通过记忆函数来优化性能，防止由新函数引用引起的不必要的重新渲染。
• useMemo：记住昂贵计算的结果，以避免不必要的重新计算值来优化性能。
• useEffect：在功能组件中执行副作用，例如获取数据或与 DOM 交互，并且可以选择自行清理。