引言

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

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

在hooks出來之后，我們能夠使用function的形式來創(chuàng)建包含內(nèi)部state的組件。但是，使用function的形式，失去了上面的shouldComponentUpdate，我們無法通過判斷前后狀態(tài)來決定是否更新。而且，在函數(shù)組件中，react不再區(qū)分mount和update兩個狀態(tài)，這意味著函數(shù)組件的每一次調(diào)用都會執(zhí)行其內(nèi)部的所有邏輯，那么會帶來較大的性能損耗。因此useMemo 和useCallback就是解決性能問題的殺手锏。

對比

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

useMemo和useCallback都會在組件第一次渲染的時候執(zhí)行，之后會在其依賴的變量發(fā)生改變時再次執(zhí)行；并且這兩個hooks都返回緩存的值，useMemo返回緩存的變量，useCallback返回緩存的函數(shù)。

useMemo

我們來看一個反例：

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

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

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

useCallback

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

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

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

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

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

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

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

以上就是react性能優(yōu)化useMemo與useCallback使用對比詳解的詳細內(nèi)容，更多關(guān)于react性能優(yōu)化useMemo useCallback的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論