useCallback 案例缓存组件根据依赖数据进行改变

useCallback 是 React Hooks 中的一个高阶函数，它用于优化性能，特别是当你有长列表的 prop 或者频繁更新的回调函数时。它会返回一个新的稳定的引用，即使依赖数组的内容发生了变化，只要那些内容对闭包内的回调无影响，useCallback 返回的引用就不会改变。
假设我们有一个计数器组件 Counter，它接受一个名为 increment 的回调作为 prop，当点击按钮时会调用这个回调增加计数值：
function Counter(increment) {
const [count, setCount] = useState(0);

// 使用 useCallback 缓存 increment 回调
const handleIncrement = useCallback(() => {
setCount(count + 1);
}, [count]); // 只监听 count 的变化

return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
}
登录后复制
在这个例子中，因为 increment 只依赖于 count，所以每次只有当 count 发生变化时，React 才会重新创建新的 handleIncrement 函数引用。如果 increment 函数本身并没有在依赖数组内，即使 increment 被多次更新，也不会影响到组件的渲染性能，因为它始终指向的是同一个引用。