React Hooks useCallback 筆記與範例
Published in
Jul 27, 2022
本文紀錄useCallback的重要概念及使用範例。
useCallback與useMemo的差別在於:useCallback記憶函數本身,給我們稍後可供調用的函數;而useMemo記住函數輸出的結果,給我們調用的函數的結果,可以瀏覽這篇文章,了解更多關於useMemo的概念。
一、useCallback重要概念
(一)什麼是Referential Equality?
後兩者(typeof Object)雖然看起來相同,但實際上占用不同的内存空间(不符合eferential equality)。
(二)Memorized Function
當 React 重新渲染組件時,會重新創建這些函數(因不符合referential equality),即使他們看起來一樣。而useCallback為使用React的開發者返回一個memoized function的定義。
二、useCallback使用範例
(一)程式碼
1.使用useCallback前
2.引發無限loop的可能
3.如何使用useCallback解決
const sum = useCallback(() => num1 + num2, [num1, num2]);
const buildArray = useCallback(() => [num1, num2], [num1, num2]);
// 將num1, num2置於dependency array
即使在Input中輸入資料變動userInput state,也不會再產生新的function,因此也不會引發useEffect的運行。
使用useCallback解決無限loop。
三、推薦影片