useCallback 是一个允许你在多次渲染中缓存函数的 React Hook。即只有在依赖项发生变化时才会重新生成该函数。
即在以下情况下才有意义(官网)：
- 将其作为 props 传递给包装在 [
memo] 中的组件。如果 props 未更改，则希望跳过重新渲染。缓存允许组件仅在依赖项更改时重新渲染。- 传递的函数可能作为某些 Hook 的依赖。比如，另一个包裹在
useCallback中的函数依赖于它，或者依赖于 [useEffect] 中的函数。
哦~~ 缓存作用~ ~，let me做个测试看看是否真的缓存了！！
看个常见的场景
在列表上(父组件)提供了个批量导入数据的按钮A(即图中"批量新增房源")，点击A后会弹出弹窗(子组件BatchInsertHouse)，弹窗上可进行上传和取消操作，点击这两个按钮会触发父组件注入的回调。
image.png
// 列表(父组件)
...
//弹窗显隐
const [batchAddHousesDialog, setBatchAddHousesDialog] = useState<boolean>(false);
//打个时间戳
const timestamp = new Date().getTime();
console.log('父render timestamp:',timestamp)
//关闭弹窗回调
const closeUploadHousesExcel = () => {
console.log('函数timestamp:',timestamp)
setBatchAddHousesDialog(false);
};
...
return (
...
{/* 弹窗子组件 */}
<BatchInsertHouse
visible={batchAddHousesDialog}
closeFn={closeUploadHousesExcel}
...
></BatchInsertHouse>
...
)
如上代码，父组件向子组件(BatchInsertHouse)注入了closeUploadHousesExcel事件，当点击了弹窗的"取消"就会执行closeUploadHousesExcel函数；
- 此时点击按钮A后看控制台：
- 点击取消：
新增两条 - 再次点击按钮A：
新增一条 - 再次取消：
新增两条, 看红色部分
可以看到随着弹窗的显示隐藏父组件会跟着render，并且我们在closeUploadHousesExcel内打印的时间戳也在不停变化，说明每次都生成了一个新的函数；
添加useCallback
让我们加上useCallback再试一次：
//其他代码不变
const closeUploadHousesExcel = useCallback(() => {
console.log('函数timestamp:',timestamp)
setBatchAddHousesDialog(false);
},[]);
- 此时点击按钮A：
- 点击取消：
绿色新增 - 当我们再次点击按钮A：
绿色新增 - 再次取消：
绿色新增，看红色部分
因为我们的函数closeUploadHousesExcel已经被缓存了，所以每次拿到的timestamp都是最开始缓存的那一个number！！！！！也就不会变化。
结论
诚不欺我，确实是缓存住啦~
