memo、 useMemo 和 useCallback

+緩存組件, 對組件淺比較 (只有組件的props, (對函數,引用要用useCallback包裹)發生變化
+緩存值, 依賴項變化，會從新計算。
+緩存函數, 依賴項變化,重新生成新函數

useMemo 語法

對返回的值緩存進行優化

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), deps);

1. 傳入一個函數進去，會返回一個 memoized 值(會記憶的值)，需要注意的是，函數內必須有返回值

2. 第二個參數會依賴值，

類似于computed實時計算

useMemo 優化

我們定義了一個total函數，內部使用 1 填充了100次，通過 reduce 計算總和，經過測試發現點擊 Increase按鈕后，只會執行 total1 ，不會執行 total2，假設total計算量巨大，就會造成內存的浪費，通過 useMemo 可以幫我們緩存計算值。

function App(){    console.log('Demo1 Parent')    let [count,setCount] = useState(0)    const handleClick = ()=>{        setCount(count+1)    }    const total1 = ()=>{        console.log('計算求和1')        let arr = Array.from({ length:100 }).fill(1)        return arr.reduce((prev,next)=>prev+next,0)    }    // 緩存對象值    const total2 = useMemo(()=>{        console.log('計算求和2')        let arr = Array.from({ length:100 }).fill(1)        return arr.reduce((prev,next)=>prev+next,0)    },[count]) return (        <div>            <div>                <label>Count：{count}</label>             <button onClick={handleClick}>Increase</button>            </div>            <div>                <label>總和：</label>                <span>{total1()}</span>                <span>{total2}</span>            </div>        </div>    )
}

useCallback 語法

對函數緩存進行優化

useCallback(callback, deps)

1. useCallback 接收 2 個參數，第一個為緩存的函數，第二個為依賴值

2. 主要用于緩存函數，第二次會返回同樣的結果。

useCallback 優化

import { memo, useCallback, useState } from 'react'function App() {const [count, setCount] = useState(0)const handleClick = useCallback(() => {console.log('子節點點擊...')}, [])return (<div className='App'><p>歡迎學習React后臺課程</p><p><span>Count: {count}</span><buttononClick={() => {setCount(count + 1)}}>按鈕</button></p><Child handleClick={handleClick} /></div>)
}const Child = memo(function Child(props: any) {console.log('child...')return (<p>我是子節點 <button onClick={props.handleClick}>按鈕</button></p>)
})

useCallback 和 useMemo 區別

• 他們都用于緩存，useCallback 主要用于緩存函數，返回一個 緩存后 函數，(防止函數重復創建)

• 而 useMemo 主要用于緩存值，返回一個緩存后的值。(防止值重復計算)

• memo,防止組件重復創建 (只有組件的props, (對函數,引用要用useCallback包裹)發生變化,組件才會更新.)