useCallback 是 React 中的一个 Hook，它的主要作用是优化性能。具体来说，useCallback 用于缓存函数实例，防止在每次组件渲染时都创建新的函数，从而避免不必要的重新渲染。
主要用途
- 防止子组件不必要的重新渲染：当父组件向子组件传递函数作为 props 时，如果这个函数在每次渲染时都被重新创建，那么即使其依赖的数据没有变化，子组件也会因为接收到新的 prop（即新创建的函数）而重新渲染。使用
useCallback 可以确保只有在依赖项发生变化时才更新函数引用，从而减少不必要的渲染。 - 记忆化函数：对于一些计算开销较大的函数，通过
useCallback 记忆化可以提高性能，特别是在函数依赖于某些状态或属性的情况下。
基本用法
import React, { useCallback } from 'react';
function MyComponent({ onClick }) {
const handleClick = useCallback(() => {
console.log('Button clicked!');
}, []); // 空数组表示此回调不会随任何状态或props的变化而改变
return <button onClick={handleClick}>点击我</button>;
}
在这个例子中，handleClick 函数只会被初始化一次，并且在整个组件生命周期内保持不变，除非依赖列表中的值发生变化。
依赖列表
useCallback(fn, deps) 接受两个参数：
- 第一个参数
fn 是你想要缓存的函数。 - 第二个参数
deps 是一个数组，包含了所有该函数所依赖的变量。只有当这些依赖项之一发生更改时，才会生成一个新的函数实例；否则将一直返回第一次调用时创建的那个函数实例。
正确地设置依赖列表非常重要，遗漏依赖会导致潜在的 bug，而包含过多不相关的依赖则会失去使用 useCallback 的意义。
注意事项
- 不要滥用
useCallback。它主要用于解决特定场景下的性能问题。如果没有明显的性能瓶颈或者不需要控制函数引用的变化，则可能不需要使用 useCallback。 - 当不确定是否需要使用
useCallback 时，可以通过 React DevTools 等工具来观察组件树的表现，帮助判断是否存在过度渲染的问题。