在這個例子中使用 React useCallback 是否合乎邏輯？

Question

我是 React 鈎子的新手，在我們項目的一個部分中，我們有一個 function 來處理卡片中的模式顯示：

 const toggleModal = () => setModalDisplay(!modalDisplay)

在這種情況下，我必須將此 function 傳遞給每個子組件……也許是 10 或 1000 個孩子！

因此，關於 React JS DOC useCallback返回一個記憶化的 function 以減少 memory 的使用並處理昂貴的計算。 但我必須將參數傳遞給第二個參數以刷新回調並返回新的。

但在這種情況下，我們有一個 state 來處理模態切換，每次都會在真假之間變化。 所以，考慮到useCallback的邏輯和我們的用例，如果我在這個例子中使用useCallback ，實際上 function ( toggleModal ) 每次都會更新，而useCallback對於這個用例是沒用的。

例如：

 const memoizedModalToggle = useCallback( () => { setModalDisplay(,modalDisplay) }, [modalDisplay]; );

最后，這是正確使用useCallback嗎？ 還是我在實現和邏輯上有錯誤？

謝謝

Answer 1

我認為您在使用 useCallback 的記憶化useCallback中設置狀態和更新回調函數之間感到困惑

例如，您可以使用空的依賴項數組來記憶您的回調 function：

 const memoizedModalToggle = useCallback( () => { setModalDisplay(,modalDisplay) }; [] );

它將類似於回調函數的useEffect邏輯。

您也可以使用Set() object 來測試此流程，因為Set能夠通過引用存儲獨特的函數，並且您可以使用set.size()來檢查已生成的回調數量。

Answer 2

好的，當您想避免更新組件時使用 useCallback 或在 state 更改時使用 function

例子：

    {useCallback(<TableStore
        params={[JSON.stringify([selectedRoute]), data]} 
        tableName="custom_table" 
        method="Select"
    >
        <ReactTable
            allowExport
            onRowClick={onRowClick}
            columns={columns}
            allowSelection={false}
        />
    </TableStore>, [selectedRoute, data])}

只有當我們單擊行或我們的數據已更新時，表才會更改和更新。

在你的情況下，不需要使用 useCallback