/

如何使用useMemo React hook

如何使用useMemo React hook

了解useMemo React hook的用途，以及如何使用它！

如果你對React Hooks還不太熟悉，請先看看我的React Hooks介紹。

有時我會使用一個React Hook叫做useMemo。

1
import React, { useMemo } from 'react'

這個hook用於創建一個儲存的值。

這個hook和useCallback非常相似，不同之處在於useCallback返回一個經過儲存的回調函數，而useMemo返回一個儲存的值，即該函數調用的結果。用例也不同，useCallback用於傳遞給子組件的回調函數。

有時候，你需要計算一個值，可能是通過複雜的計算或者是從數據庫中進行昂貴的查詢或者通過網絡獲取。

使用這個hook，這個操作只會執行一次，然後該值將被存儲在儲存的值中，下次你想要引用它時，你將能夠更快地獲取它。

以下是使用方法：

1
const memoizedValue = useMemo(() => expensiveOperation())

請確保在useMemo()的第二個參數中添加一個空數組，否則將不會進行任何儲存操作。

如果你需要傳遞參數，你還需要將它們作為數組傳遞：

1
const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2])

如果其中一個參數在你訪問該值時發生變化，該值將被重新計算而無法使用儲存。

tags: [“React”, “useMemo”, “React Hook”, “優化”]