React Hooks 中的 useCallback 函数

useCallback 是 React Hooks 中的一个函数，用于优化函数组件的性能。它的主要作用是用来创建一个经过优化的记忆化回调函数。

当在组件中定义一个回调函数时，每次组件重新渲染时都会创建一个新的函数实例。这可能会导致不必要的重新渲染，并影响性能。使用 useCallback 可以避免这种情况，保证只在依赖项改变时才创建新的函数。

useCallback 接受两个参数：一个回调函数和一个依赖数组。回调函数会在依赖项变化时重新创建，否则会返回缓存的回调函数。

示例:

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

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // 仅在 count 发生变化时才创建新的回调函数

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

在上面的例子中，只有当 count 发生变化时，handleClick 函数才会重新创建。这样可以避免不必要的渲染，并提高性能。

需要注意的是，使用 useCallback 可能会在某些情况下引发额外的复杂性，所以只有在性能优化的需求明确时才应使用它。

优化性能(react)