react的hooks中useCallback用法

`useCallback` 是一个用于优化性能的 Hook，它的作用是缓存一个函数，以便在下一次渲染时可以直接使用缓存的函数，避免因为函数引用的变化导致子组件的不必要的重新渲染。

其语法如下：

const memoizedCallback = useCallback(
  () => {
    // do something
  },
  [dependency],
);

其中第一个参数是要缓存的函数，第二个参数是一个数组，用于指定依赖项。只有当依赖项发生变化时，才会重新缓存函数。

使用 `useCallback` 的场景通常是在将一个回调函数作为 props 传递给子组件时，以确保子组件不会因为 props 发生变化而重新渲染。例如：

import React, { useCallback, useState } from "react";
import Child from "./Child";

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

  // 使用 useCallback 缓存 handleIncrement 函数
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);

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

export default Parent;

在上面的示例中，`handleIncrement` 函数被缓存起来，并作为 `onIncrement` prop 传递给 `Child` 组件。因为 `handleIncrement` 函数的引用不会因为 `count` 的变化而发生变化，所以可以避免不必要的子组件重新渲染。