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 快取 整個元件，以防止父更新重新渲染。 選擇性地使用記憶化：正確使用記憶化可以提高效能，但如果過度使用或誤用，則會增加複雜性。
