usecallback
时间: 2023-12-05 21:59:00 浏览: 17
useCallback 是一个 React hook,它的作用是返回一个 memoized 回调函数。这意味着,每当你在函数组件内调用 useCallback,它会在依赖项(第二个参数)没有发生变化时返回一个缓存的函数,并在依赖项发生变化时返回一个新的函数。这对于避免不必要的重渲染很有用,因为如果回调函数没有发生变化,就不会引发组件重新渲染。
举个例子,假设你有一个父组件,它渲染了一个子组件,并传递了一个回调函数作为 props:
```
function ParentComponent() {
const [count, setCount] = useState(0);
const handleClick = () => setCount(count + 1);
return <ChildComponent onClick={handleClick} />;
}
```
如果你在子组件内使用了 useCallback,它可以帮助你避免在每次渲染时都创建一个新的回调函数。例如:
```
function ChildComponent({ onClick }) {
const handleClick = useCallback(() => {
onClick();
}, [onClick]);
return <button onClick={handleClick}>Click me</button>;
}
```
这样,每当 ParentComponent 渲染时,handleClick 将始终是相同的函数,并且只有当 onClick 发生变化时才会发生变化。这样可以避免不必要的重渲染。