memo、useMemo和useCallback的區別

memo用來優化函數組件的重複渲染行爲,當傳入屬性值都不變的情況下不會觸發組件的重新渲染,否則就會觸發組件的重新渲染;和類組件的PureComponent的功能是類似的;在hooks環境下,幾乎所有組件都是函數式組件,我們使用memo的機率要比PureComponent高得多;

memo針對的是一個組件的渲染是否重複執行

而useMemo則定義了一段函數邏輯是否重複執行
本質都是用同樣的算法來判定依賴是否發生改變,繼而決定是否觸發特定邏輯;(有很多這樣的邏輯:輸入和輸出是對等的,相同的輸入一定產生相同的輸出,數學上稱之爲冪等)利用memo就可以避免不必要的重複計算,減少資源浪費。

所以嚴格來講,不使用memo和useMemo不應該會導致你的業務邏輯發生變化(memo和useMemo只是用來做性能優化)​

useMemo和useEffect的語法是一樣的,第一個參數是要執行的邏輯函數,第二個參數是這個邏輯函數依賴的變量組成的數組,如果不傳第二個參數,則useMemo的邏輯函數每次都執行,那useMemo的意義就不存在了。如果傳入空數組,則只執行一次;

useMemo和useEffect的執行時機是不一致的:useEffect執行的是副作用,所以一定是在渲染之後執行的,useMemo是需要有返回值的,而返回值可以直接參與渲染的,所以useMemo是在渲染期間完成的,有這樣一個一前一後的區別

userMemo和useCallback接受的參數都是一樣的,第一個參數爲回調函數,第二個參數是要依賴的數據;

共同點:只有在依賴數據發生變化後,纔會重新計算結果,起到緩存的作用

區別:useMemo返回的是計算的結果值,用於緩存計算後的狀態
useCallback返回的是函數,主要用來緩存函數,因爲函數式組件中的state的變化都會導致整個組件被重新刷新(即使一些函數沒有必要被刷新),此時用useCallback就會將函數進行緩存,減少渲染時的性能損耗​;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章