useCallback是一个用来缓存函数的Hook，用来解决函数组件中函数重新创建导致子组件重新渲染的问题

来源：恒创科技编辑：恒创科技编辑部

2024-02-19 13:57:32

useCallback是一个用来缓存函数的Hook，用来解决函数组件中函数重新创建导致子组件重新渲染的问题。正确使用useCallback可以提高性能，避免不必要的渲染。

useCallback接受两个参数，第一个参数是一个函数，第二个参数是一个依赖数组。当依赖数组中的值发生变化时，函数会重新创建，否则会返回缓存的函数。

下面是一个示例，演示了如何正确使用useCallback：

useCallback是一个用来缓存函数的Hook，用来解决函数组件中函数重新创建导致子组件重新渲染的问题

importReact,{useState,useCallback}from'react';

constApp=()=>{
const[count,setCount]=useState(0);

consthandleClick=useCallback(()=>{
setCount(count+1);
},[count]);

return(
<div>
<h1>{count}</h1>
<buttononClick={handleClick}>IncreaseCount</button>
</div>
);
};

exportdefaultApp;