在 React 中，useCallback 是一个优化性能的 Hook，主要用于 记忆化 （memoization）函数，从而防止在每次渲染时创建新的函数实例。具体来说，useCallback 可以帮助你确保某个函数只会在依赖项发生变化时才会重新创建，否则它会返回上一次的函数引用。
-
适用场景 ：函数作为 props 传递给子组件，或者作为
useEffect依赖项时，可以使用useCallback优化性能。 -
当函数比较简单或不传递给子组件时 ，没有必要使用
useCallback。React 会自动优化简单的函数，不需要显式缓 -
举例一：传递函数给子组件： 当你将一个函数作为 prop 传递给子组件时，如果该函数在每次父组件渲染时都会重新创建，子组件也会重新渲染（如果该函数作为依赖项）。通过
useCallback，你可以确保只有在相关依赖变化时才会创建新的函数。 -
import React, { useState, useCallback } from 'react';
function Child({ onClick }) {
console.log("Child rendered");
return <button onClick={onClick}>Click me</button>;
}
function Parent() {
const count, setCount = useState(0);
// 使用 useCallback 确保只有当 count 改变时，onClick 才会更新
const handleClick = useCallback(() => {
setCount(count + 1);
}, count); // 依赖于 count
return (
<div>
<Child onClick={handleClick} />
<p>Count: {count}</p>
</div>
);
}
export default Parent;
举例2 ：与useEffect结合使用：useEffect会在依赖项发生变化时重新运行，如果传给useEffect的回调函数总是被重新创建，可能会导致不必要的副作用执行。使用useCallback可以确保回调函数只有在必要时才被重新创建。import React, { useState, useEffect, useCallback } from 'react';
function Example() {
const count, setCount = useState(0);
const memoizedCallback = useCallback(() => {
console.log('Callback called');
}, \[\]); // 只有在依赖数组为空时，回调函数才会创建一次
useEffect(() => {
console.log('Effect ran');
memoizedCallback();
}, memoizedCallback); // 使用 memoizedCallback 作为 effect 的依赖
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}