useCallback(fn,dependencies)

useCallback用来缓存函数定义

useCallback会返回一个函数，如果依赖值没有改变，会返回相同的函数

默认情况下，当一个组件重新渲染时，React 会递归地重新渲染它的所有子组件

当组件重新渲染比较慢时我们可以使用useCallback和memo（memo允许在props不变的情况下跳过组件渲染，如果组件自身的状态发生变化或者它使用的上下文发生变化组件会重新渲染）来进行优化

在 JavaScript 中，一个 function(){} 或者 ()=>{} 总是创建一个不同的函数

所以当memo缓存一个prop为函数的组件时会不起作用，这时候我们就可以使用useCallback来缓存这个函数

function ProductPage({ productId, referrer, theme }) {
const handleSubmit = useCallback((orderDetails) => {

post('/product/' + productId + '/buy', {

referrer,

orderDetails,

});

}, [productId, referrer]);



return (

<div className={theme}>

{/* ...ShippingForm仅在handelSubmit函数改变时重新渲染 */}

<ShippingForm onSubmit={handleSubmit} />

</div>

);

}