iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

30天學 React.js 系列 第 10

[Day10] [筆記]React Hooks-useMemo、useCallback

前言

我們昨天介紹了 Hooks 中比較常用的 UseStateUseEffect,那我們今天繼續接著介紹另外一種類型的 Hooks - Memorized Hook

Memorized Hook

適用時機:

  • 不需要常常被 render 的元件或 Function
  • 執行速度慢的 Function

useMemo

兩個參數,第一個接函式、第二個接 Dependency [],如果沒有給依賴陣列每次都會重新 Render

會 Return 一個 memorized value

const Demo = () => {
    const [number, setnumber] = useState(0);
    // 兩個參數,第一個接函式、第二個接 Dependency [],如果沒有給依賴陣列每次都會重新 Render
    // 當第二個依賴陣列改變時, useMemo 才會重新 Render
    useMemo(() => { spendLongTimeFunction(number);}, [number])
}

useCallback

兩個參數,第一個接函式、第二個接 Dependency [],如果沒有給依賴陣列每次都會重新 Render

const Demo = () => {
    // useCallback 跟 useMemo差異在於可以 
    // useCallback 互叫時可以帶參數如: callback(add),其回傳是整個函式 
    // useMemo 回傳是函式的值
    const callback = useCallback((add) => {
        spendLongTimeFunction(number+ add);
    },[number])
}

參考資料


上一篇
[Day9] [筆記]React Hooks-UseState、UseEffect
下一篇
[Day11] [筆記]React Hooks - UseRef
系列文
30天學 React.js 14

尚未有邦友留言

立即登入留言