useCallback实例

useCallback实例：
 

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

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

  const incrementCount = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={incrementCount}>Click me</button>
    </div>
  );
}

export default Example;

在这个示例中，我们定义了一个名为 incrementCount 的回调函数，它将计数器的值增加1。为了使用 useCallback，我们传递了一个依赖项数组 [count]，表示只有当 count 改变时才需要重新创建该回调函数。

接下来，在页面上展示计数器和一个按钮，并将 incrementCount 回调函数作为按钮的点击事件处理程序。由于我们使用了 useCallback，所以在每次渲染时，该回调函数都不会重新创建，避免了不必要的重复计算。

总之，useCallback 可以帮助我们缓存回调函数并避免渲染同样的函数引用，从而提高React组件的性能。