何時使用 useMemo 和 useCallback：React 愛好者的簡要指南

如果您是 React 開發人員，您可能已經在網上遇到過 React useMemo 與 useCallback 的討論，結果比以往任何時候都更加困惑。 很難弄清楚 useMemo 和 useCallback 之間的區別。 沒關係！ 一開始可能很難理解 React-Hooks，但它們在以後會非常有用。

在本文中，我們將向您展示 useCallback 和 useMemo 之間的區別以及何時使用 useCallback 和 useMemo。

useMemo 和 useCallback 的區別

React 16.8 引入了兩個內置的鉤子。 引入這些功能是為了優化性能。 useMemo 與 useCallback 之間的差異似乎可以忽略不計，因此我們將嘗試消除混淆。

什麼是 React-Hooks？

Hooks 是 React 中引入的新特性，它允許在不編寫類的情況下使用 useState 和其他 React 特性。 掛鉤是“掛鉤”到 React 的狀態和生命週期特性的方法和函數。

useCallback 與 useMemo

每當子組件在沒有真正需要的情況下一遍又一遍地重新渲染時，都會使用 useCallback 掛鉤。 當您使用 useCallback 時，您可以通過返回正在傳遞的該函數的相同實例而不是每次都創建一個新實例來防止這種不必要的重新渲染。 這可以節省大量時間（以及花費在開發時間上的金錢）。 使用 memoized 回調傳遞一組依賴項將產生一個 memoized 版本，該版本僅在依賴項更改時才會更改。

在 React 的功能組件中使用了 useMemo。 它用於返回一個記憶值。 記憶是指通過返回緩存結果而不是為下次運行再次重新編譯具有相同參數的函數來節省重新編譯時間的過程。 緩存的結果在下次調用時返回。 useMemo 鉤子提供內存映射值。

顯然，有一些相似之處。 在 useMemo 和 useCallback 中，鉤子接受一個函數以及一個依賴數組。 但是，useCallback 會記住返回值，而 useMemo 會記住函數。 換句話說，一個緩存一個值類型，另一個緩存一個函數。

• 閱讀更多——如何以及為什麼要保持文件井井有條
• 在課堂上使用電子設備的 9 大方法

何時使用 useCallback 與 useMemo

那麼什麼時候應該使用 useCallback，什麼時候 useMemo 是最好的選擇呢？ 讓我們看一個例子。 如果計算量大且成本高昂的代碼接受參數並返回值，則 useMemo 是最佳選擇。 這樣，您可以在渲染之間繼續引用值，而無需重新運行代碼並浪費您的時間和計算能力。

如果你需要在多個渲染中保持一個函數實例的持久性，你應該使用 useCallback 代替，因為它本質上將函數放在你的 React 組件範圍之外以保持它的完整性。

什麼是使用效果？

我們已經提到了依賴數組，你在使用 useEffect 時可能會遇到。 useEffect 是另一個 React 鉤子。 它用於使用回調參數邏輯處理功能組件中的副作用。 依賴項是副作用的依賴項列表，例如，道具或狀態值。

這個鉤子向 React 展示了組件在渲染後需要執行一個動作。 當 DOM 更新時，您傳遞的效果將被存儲。 您還可以執行數據獲取來實現此結果。

簡而言之，useCallback、useMemo 和 useEffect 都與提高 React 應用程序中組件重新渲染之間的性能有關。

不過，重要的是不要過度使用鉤子。 這些鉤子引入了新的複雜邏輯，它可能會產生與您預期相反的效果，產生性能問題而不是解決它們。 useMemo 應該只用於非常昂貴的計算。

不要使用 useMemo 或 useCallback 來修復應用程序的基本問題。 最終，這些問題會重新出現並困擾您，因此最好先解決任何已知故障。

• 閱讀更多 –如何選擇最佳 CMS
• 加密方法的優缺點是什麼？

結論

希望這篇文章很有見地，並且您可以更好地理解這兩個鉤子。 總之：

• 都接受一個函數和依賴數組
• useMemo 記憶返回值，useCallback 記憶函數。

useMemo 和 useCallback 之間的區別非常明顯！ 這些工具具有節省時間和金錢的潛力，但前提是它們必須在適當的上下文和環境中使用。

我希望本教程可以幫助您了解何時使用 useMemo 和 useCallback：React Fans 簡要指南。 如果您想說什麼，請通過評論部分告訴我們。 如果你喜歡這篇文章，請分享它並在 Facebook、Twitter 和 YouTube 上關注 WhatVwant 以獲取更多技術提示。

何時使用 useMemo 和 useCallback – 常見問題