useCallback 案例缓存组件根据依赖数据进行改变
时间: 2024-12-23 15:26:54 浏览: 17
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
被多次更新,也不会影响到组件的渲染性能,因为它始终指向的是同一个引用。
相关推荐

















