useCallback是React的一個hook,用于優化性能。它的作用是緩存一個函數,確保在組件重新渲染時,不會創建新的函數實例。
useCallback接受兩個參數:回調函數和一個依賴數組。當依賴數組中的依賴項發生變化時,才會重新創建回調函數。如果依賴數組為空,則回調函數只會在組件首次渲染時創建一次。
使用useCallback的場景包括:
示例代碼:
import React, { useCallback } from 'react';
const MyComponent = () => {
const handleClick = useCallback(() => {
console.log('Button clicked');
}, []);
return (
<button onClick={handleClick}>Click me</button>
);
};
在上面的例子中,handleClick函數只會在組件首次渲染時創建一次,不會因為組件重新渲染而創建新的實例。