useCallback

用于优化性能，在组件重新渲染时返回一个记忆化的回调函数，以避免不必要的函数创建和重新渲染。

当使用 useCallback 创建一个记忆化的回调函数时，React 内部会使用一个缓存来存储这个函数，在组件的下一次渲染时，React 会检查依赖项数组是否发生了变化。如果依赖项数组的值没有发生变化，React 将从缓存中获取已记忆化的回调函数，而不会重新创建一个新的函数。

index.tsx

import React, { useCallback } from 'react';

function MyApp() {
  const handleButtonClick = useCallback(() => {
    console.log('Button clicked!');
  }, []);

  return (
    <ButtonComponent onClick={handleButtonClick} />
  );
}

function ButtonComponent({ onClick }) {
  return (
    <button onClick={onClick}>Click Me</button>
  );
}

export default MyApp;