react性能優化useMemo與useCallback使用對比詳解

Posted on by

引言

在介紹一下這兩個hooks的作用之前，我們先來回顧一下react中的性能優化。在hooks誕生之前，如果組件包含內部state，我們都是基於class的形式來創建組件。當時我們也知道，react中，性能的優化點在於：

調用setState，就會觸發組件的重新渲染，無論前後的state是否不同 父組件更新，子組件也會自動的更新 基於上面的兩點，我們通常的解決方案是：使用immutable進行比較，在不相等的時候調用setState；在shouldComponentUpdate中判斷前後的props和state，如果沒有變化，則返回false來阻止更新。

在hooks出來之後，我們能夠使用function的形式來創建包含內部state的組件。但是，使用function的形式，失去瞭上面的shouldComponentUpdate，我們無法通過判斷前後狀態來決定是否更新。而且，在函數組件中，react不再區分mount和update兩個狀態，這意味著函數組件的每一次調用都會執行其內部的所有邏輯，那麼會帶來較大的性能損耗。因此useMemo 和useCallback就是解決性能問題的殺手鐧。

對比

useCallback和useMemo的參數跟useEffect一致，他們之間最大的區別有是useEffect會用於處理副作用，而前兩個hooks不能。

useMemo和useCallback都會在組件第一次渲染的時候執行，之後會在其依賴的變量發生改變時再次執行；並且這兩個hooks都返回緩存的值，useMemo返回緩存的變量，useCallback返回緩存的函數。

useMemo

我們來看一個反例：

這裡創建瞭兩個state，然後通過expensive函數，執行一次昂貴的計算，拿到count對應的某個值。我們可以看到：無論是修改count還是val，由於組件的重新渲染，都會觸發expensive的執行(能夠在控制臺看到，即使修改val，也會打印)；

但是這裡的昂貴計算隻依賴於count的值，在val修改的時候，是沒有必要再次計算的。在這種情況下，我們就可以使用useMemo，隻在count的值修改時，執行expensive計算：

上面我們可以看到，使用useMemo來執行昂貴的計算，然後將計算值返回，並且將count作為依賴值傳遞進去。這樣，就隻會在count改變的時候觸發expensive執行，在修改val的時候，返回上一次緩存的值。

useCallback

useCallback 講完瞭useMemo，接下來是useCallback。useCallback跟useMemo比較類似，但它返回的是緩存的函數。我們看一下最簡單的用法：

const fnA = useCallback(fnB, [a]) 上面的useCallback會將我們傳遞給它的函數fnB返回，並且將這個結果緩存；當依賴a變更時，會返回新的函數。既然返回的是函數，我們無法很好的判斷返回的函數是否變更，所以我們可以借助ES6新增的數據類型Set來判斷，具體如下：

我們可以看到，每次修改count，set.size就會+1，這說明useCallback依賴變量count，count變更時會返回新的函數；而val變更時，set.size不會變，說明返回的是緩存的舊版本函數。

知道useCallback有什麼樣的特點，那有什麼作用呢？

使用場景是：有一個父組件，其中包含子組件，子組件接收一個函數作為props；通常而言，如果父組件更新瞭，子組件也會執行更新；但是大多數場景下，更新是沒有必要的，我們可以借助useCallback來返回函數，然後把這個函數作為props傳遞給子組件；這樣，子組件就能避免不必要的更新。

不僅是上面的例子，所有依賴本地狀態或props來創建函數，需要使用到緩存函數的地方，都是useCallback的應用場景。

多談一點 useEffect、useMemo、useCallback都是自帶閉包的。也就是說，每一次組件的渲染，其都會捕獲當前組件函數上下文中的狀態(state, props)，所以每一次這三種hooks的執行，反映的也都是當前的狀態，你無法使用它們來捕獲上一次的狀態。對於這種情況，我們應該使用ref來訪問。

以上就是react性能優化useMemo與useCallback使用對比詳解的詳細內容，更多關於react性能優化useMemo useCallback的資料請關註WalkonNet其它相關文章！

推薦閱讀：