react的hooks的useCallback：

简介：

useCallback 是 React 提供的一个钩子函数，用于在函数组件中进行性能优化。它的作用是缓存函数的引用，避免不必要的函数重创建。

在某些情况下，当一个函数作为 prop 传递给子组件时，每次父组件重新渲染时，这个函数也会被重新创建，

导致子组件的不必要的重新渲染。为了避免这种情况，可以使用 useCallback 来缓存函数的引用。

useCallback 接收两个参数：一个回调函数和一个依赖数组。

回调函数即要缓存的函数，依赖数组用于指定哪些变量的变化会导致回调函数重新创建。只有当依赖数组中的值发生改变时，才会重新创建并返回新的函数引用。

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

function Example() {
    const [count, setCount] = useState(0);
    // 由于我们的依赖数组是一个空数组 []，所以 handleButtonClick 函数只会在组件首次渲染时创建一次，后续的重新渲染不会重新创建函数。
    const handleButtonClick = useCallback(() => {
        console.log('Button clicked');
        // 执行其他操作
    }, []);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={handleButtonClick}>Increment</button>
        </div>
    );
}
// 在上面的例子中，我们定义了一个 handleButtonClick 的回调函数，并使用了 useCallback 来缓存它的引用。
// 由于我们的依赖数组是一个空数组 []，所以 handleButtonClick 函数只会在组件首次渲染时创建一次，后续的重新渲染不会重新创建函数。
// 需要注意的是，由于 useCallback 缓存的是函数引用，当依赖数组中的值发生变化时，返回的是同一个函数引用。
// 这意味着，如果你在依赖数组中使用了动态更新的值，那么该函数在每次重新渲染时都会是最新的值。
// 使用 useCallback 可以避免不必要的函数重新创建，提高组件的性能。
// 然而，需要在性能问题确实存在时才使用 useCallback 进行优化，因为大多数情况下，函数的重新创建并不会带来明显的性能问题。