反應記憶備忘錄

React 提供了三個主要的記憶工具，透過最大限度地減少不必要的重新渲染和重新計算來優化組件性能：

1. useMemo – 記憶計算值

• 用途：快取計算結果，僅在依賴關係改變時重新計算。

• 用法：用於昂貴的計算或派生資料，僅應使用特定依賴項進行更新。
  

• 最佳實務：

  • 將函數內使用的所有依賴項包含在依賴項數組中。
  • 避免在 useMemo 中建立新的參考（陣列、物件）或內聯函數。
  • 注意：不要將 useMemo 用於函數；它緩存值，而不是函數引用。

2. useCallback – Memoize 函數參考

• 用途：快取函數引用，防止每次渲染時重新建立。

• 用法：用於穩定函數引用，特別是用於傳遞給子組件的回調（例如事件處理程序）。
  

• 最佳實務：

  • 將函數內使用的所有依賴項包含在依賴項數組中，以避免過時的值。
  • 避免在 useCallback 中宣告內聯函數，因為這可能會破壞記憶。
  • 注意：僅對函數使用 useCallback。錯誤地使用 useCallback 來取得值會導致低效的程式碼和不必要的函數呼叫。

3. React.memo – 記憶整個組件

• 用途：如果功能組件的屬性未變更，則防止重新渲染。

• 用法：用於最佳化子元件，當父元件改變時不需要重新渲染。
  

• 最佳實務：

  • 與接收穩定 props 或很少更改的 props 的組件一起使用。
  • 避免頻繁更改 props（例如新物件/陣列），以最大限度地提高 React.memo 的有效性。
  • 注意：與 useCallbackmemoized 函數配合良好，可以維護傳遞給子組件的穩定 props。

---

需要記住的要點

• 使用 useMemo 作為值 和 useCallback 作為函數。
  • 對函數使用 useMemo 會導致立即執行，而不是穩定的函數參考。
  • 對值使用 useCallback 傳回一個函數，這會導致程式碼效率低下，需要額外的函數呼叫。
• 記憶總結：
  • useMemo：快取計算值（函數的回傳值）。
  • useCallback：快取函數引用（回呼）。
  • React.memo：基於 props 快取 整個元件，以防止父更新重新渲染。
• 選擇性地使用記憶化：正確使用記憶化可以提高效能，但如果過度使用或誤用，則會增加複雜性。

以上是反應記憶備忘錄的詳細內容。更多資訊請關注PHP中文網其他相關文章！