【web前端】useCallback 和 useMemo 的用法

useCallback

使用useCallback可以避免组件重复渲染，提升性能，以下是一个使用useCallback的例子：

import { useCallback } from 'react';

const App = () => {
  const [counter, setCounter] = useState(0);

  const incrementCounter = useCallback(
    () => setCounter(prevCounter => prevCounter + 1),
    [setCounter]
  );

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={incrementCounter}>Increment Counter</button>
    </div>
  );
};

在上面的例子中，我们使用useCallback来包装incrementCounter函数，这样每次incrementCounter函数被调用时，它的引用就不会发生改变，从而避免了组件的重复渲染。

useMemo

useMemo 可以帮助我们优化 React 应用的性能，它接受一个函数和一个可选的数组作为参数，当数组中的值发生变化时，函数才会重新执行，否则函数不会重新执行，从而避免了不必要的重新渲染。

举例说明：

const App = () => {
  const [num, setNum] = useState(0);
  const [name] = useState('Nick');

  // 使用 useMemo 优化处理
  const doubleNum = useMemo(() => num * 2, [num]);

  return (
    <div>
      <p>{`${name}'s number is ${doubleNum}`}</p>
      <button onClick={() => setNum(num + 1)}>+1</button>
    </div>
  );
};

useCallback 和 useMemo 的区别

• useCallback 是一个 Hook，它会返回一个 memoized （记忆化的）回调函数，其中的 dependencies 将被用来决定它是否需要重新计算。

• useMemo 也是一个 Hook，它会返回一个 memoized 值，其中的 dependencies 将被用来决定它是否需要重新计算。它接受一个函数作为第一个参数，它将在 dependencies 发生变化时被调用，并且返回一个 memoized 的值。