使用 useMemo 和 memo 優化 React 應用性能
在構建復雜的 React 應用時，性能優化是確保應用流暢運行的關鍵。React 提供了多種工具來幫助開發者優化組件的渲染和計算邏輯，其中 useMemo 和 memo 是兩個非常有用的 Hook。本文將詳細介紹這兩個工具的使用方法及其應用場景。
1. useMemo 的介紹與使用
1.1 什么是 useMemo？
useMemo 是一個 React Hook，用于記憶（緩存）某些計算結果，以避免不必要的重復計算。它接收兩個參數：一個返回值的計算函數和一個依賴項數組。只有當依賴項發生變化時，useMemo 才會重新計算并返回新的值；否則，它將返回之前緩存的結果。
1.2 useMemo 的語法
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
computeExpensiveValue(a, b)是一個計算昂貴值的函數。[a, b]是依賴項數組，只有當這些依賴項發生變化時，useMemo才會重新執行計算。
1.3 示例：優化總價計算
在你的 Test2.tsx 組件中，total 函數用于計算商品的總價。每次組件重新渲染時，total 都會重新計算。為了優化這一點，我們可以使用 useMemo 來緩存計算結果：
import React, { useState, useMemo } from 'react';export default function Test2() {const [search, setSearch] = useState('');const [list, setList] = useState([{ id: 1, name: '蘋果', price: 10, count: 1 },{ id: 2, name: '小米', price: 20, count: 1 },{ id: 3, name: '華為', price: 30, count: 1 },]);const handleAdd = (id: number) => {setList(list.map(item => item.id === id ? { ...item, count: item.count + 1 } : item));};const handleSub = (id: number) => {setList(list.map(item => item.count > 1 && item.id === id ? { ...item, count: item.count - 1 } : item));};// 使用 useMemo 緩存總價計算結果const total = useMemo(() => {return list.reduce((pre, cur) => pre + cur.price * cur.count, 0);}, [list]);return (<div><h1>父組件</h1><input type="text" value={search} onChange={(e) => setSearch(e.target.value)} /><table border={1} cellPadding={5} cellSpacing={0}><thead><tr><th>商品名稱</th><th>商品價格</th><th>商品數量</th></tr></thead><tbody>{list.map(item => (<tr key={item.id}><td>{item.name}</td><td>{item.price * item.count}</td><td><button onClick={() => handleAdd(item.id)}>+</button><span>{item.count}</span><button onClick={() => handleSub(item.id)}>-</button></td></tr>))}</tbody><tfoot><tr><th scope="row" colSpan={1}>總價</th><td>{total}</td></tr></tfoot></table></div>);
}
在這個例子中，useMemo 確保只有當 list 發生變化時才會重新計算 total，從而減少了不必要的計算開銷。
2. memo 的介紹與使用
2.1 什么是 memo？
memo 是 React 提供的一個高階組件（HOC），用于防止子組件不必要的重新渲染。它通過比較當前和上次渲染的 props 來決定是否需要重新渲染組件。如果 props 沒有變化，則跳過渲染，直接復用之前的渲染結果。
2.2 memo 的語法
const MemoizedComponent = React.memo(MyComponent);
MyComponent是你想要優化的組件。React.memo返回一個新的組件，該組件會在 props 沒有變化時不重新渲染。
2.3 示例：優化子組件渲染
假設我們有一個子組件 ProductItem，它負責顯示單個商品的信息。我們可以使用 memo 來優化這個組件，避免不必要的重新渲染：
import React from 'react';
import { memo } from 'react';interface ProductItemProps {product: { id: number; name: string; price: number; count: number };onAdd: () => void;onSub: () => void;
}const ProductItem: React.FC<ProductItemProps> = ({ product, onAdd, onSub }) => {console.log('ProductItem rendered');return (<tr key={product.id}><td>{product.name}</td><td>{product.price * product.count}</td><td><button onClick={onAdd}>+</button><span>{product.count}</span><button onClick={onSub}>-</button></td></tr>);
};// 使用 memo 包裝 ProductItem 組件
const MemoizedProductItem = memo(ProductItem);export default MemoizedProductItem;
在這個例子中，MemoizedProductItem 只會在其 props 發生變化時重新渲染，否則會復用之前的渲染結果，從而提高性能。
3. useMemo 和 memo 的區別
-
作用范圍：
useMemo用于優化組件內部的計算邏輯，減少不必要的計算。memo用于優化組件的渲染行為，減少不必要的重新渲染。
-
使用場景：
- 當你在組件內部有復雜的計算邏輯時，可以使用
useMemo來緩存計算結果。 - 當你有一個子組件頻繁重新渲染但實際內容沒有變化時，可以使用
memo來優化渲染性能。
- 當你在組件內部有復雜的計算邏輯時，可以使用
4. 總結
useMemo 和 memo 是 React 中非常強大的工具，能夠顯著提升應用的性能。合理使用它們可以幫助你避免不必要的計算和渲染，從而讓應用更加高效和流暢。希望本文能幫助你更好地理解和使用這兩個工具，為你的 React 應用帶來更好的用戶體驗。
)
