[TOC] ## 概述 useCallback 是一個允許你在多次渲染中緩存函數的 React Hook。 **默認情況下，當一個組件重新渲染時， React 將遞歸渲染它的所有子組件** 語法 ``` useCallback(fn, dependencies) ``` ## 示例 ### Hello World bad ``` function ProductPage({ productId, referrer, theme }) { // 每當 theme 改變時，都會生成一個不同的函數 function handleSubmit(orderDetails) { post('/product/' + productId + '/buy', { referrer, orderDetails, }); } return ( <div className={theme}> {/* 這將導致 ShippingForm props 永遠都不會是相同的，并且每次它都會重新渲染 */} <ShippingForm onSubmit={handleSubmit} /> </div> ); } ``` good ``` function ProductPage({ productId, referrer, theme }) { // 在多次渲染中緩存函數 const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); // 只要這些依賴沒有改變 return ( <div className={theme}> {/* ShippingForm 就會收到同樣的 props 并且跳過重新渲染 */} <ShippingForm onSubmit={handleSubmit} /> </div> ); } ``` ## useCallback 與 useMemo 有何關系？ ``` import { useMemo, useCallback } from 'react'; function ProductPage({ productId, referrer }) { const product = useData('/product/' + productId); const requirements = useMemo(() => { //調用函數并緩存結果 return computeRequirements(product); }, [product]); const handleSubmit = useCallback((orderDetails) => { // 緩存函數本身 post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); return ( <div className={theme}> <ShippingForm requirements={requirements} onSubmit={handleSubmit} /> </div> ); } ``` * **[`useMemo`](https://zh-hans.react.dev/reference/react/useMemo)緩存函數調用的結果**。在這里，它緩存了調用`computeRequirements(product)`的結果。除非`product`發生改變，否則它將不會發生變化。這讓你向下傳遞`requirements`時而無需不必要地重新渲染`ShippingForm`。必要時，React 將會調用傳入的函數重新計算結果。 * **`useCallback`緩存函數本身**。不像`useMemo`，它不會調用你傳入的函數。相反，它緩存此函數。從而除非`productId`或`referrer`發生改變，`handleSubmit`自己將不會發生改變。這讓你向下傳遞`handleSubmit`函數而無需不必要地重新渲染`ShippingForm`。直至用戶提交表單，你的代碼都將不會運行。