React?中hooks之?React.memo?和?useMemo用法示例總結
更新時間：2025年01月23日 14:22:34 作者：傻小胖
React.memo是一個高階組件,用于優(yōu)化函數組件的性能,通過記憶組件渲染結果來避免不必要的重新渲染,合理使用React.memo和useMemo可以顯著提升React應用的性能,本文介紹React?中hooks之?React.memo?和?useMemo用法總結,感興趣的朋友一起看看吧
1. React.memo 基礎
React.memo 是一個高階組件（HOC），用于優(yōu)化函數組件的性能，通過記憶組件渲染結果來避免不必要的重新渲染。
1.1 基本用法
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 渲染邏輯 */
});只有props發(fā)生變化才會重新渲染MemoizedComponent
1.2 帶有比較函數的用法
const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
// 返回 true 表示不需要重新渲染
// 返回 false 表示需要重新渲染
return prevProps.id === nextProps.id;
});2. React.memo 使用場景
2.1 純展示組件
const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
// 復雜的渲染邏輯
return (
<div>
{data.map(item => (
<div key={item.id}>
<h3>{item.title}</h3>
<p>{item.description}</p>
</div>
))}
</div>
);
});
// 父組件
function ParentComponent() {
const [count, setCount] = useState(0);
const data = [/* 大量數據 */];
return (
<div>
<button onClick={() => setCount(c => c + 1)}>
Count: {count}
</button>
<ExpensiveComponent data={data} />
</div>
);
}2.2 列表項組件
const ListItem = React.memo(function ListItem({ item, onItemClick }) {
console.log(`Rendering item ${item.id}`);
return (
<li onClick={() => onItemClick(item.id)}>
{item.name}
</li>
);
});
function List({ items }) {
const [selectedId, setSelectedId] = useState(null);
// 使用 useCallback 來記憶回調函數
const handleItemClick = useCallback((id) => {
setSelectedId(id);
}, []);
return (
<ul>
{items.map(item => (
<ListItem
key={item.id}
item={item}
onItemClick={handleItemClick}
/>
))}
</ul>
);
}3. useMemo 基礎
useMemo 是一個 Hook，用于記憶計算結果，避免在每次渲染時重復進行昂貴的計算。
3.1 基本用法
const memoizedValue = useMemo(() => {
// 進行計算并返回結果
return computeExpensiveValue(a, b);
}, [a, b]); // 依賴項數組，空數組時只有初始化的時候執(zhí)行，沒有依賴參數項state每次變化都會引起重新執(zhí)行，有依賴數組室，依賴數據發(fā)生變化才會觸發(fā)重新執(zhí)行4. useMemo 使用場景
4.1 昂貴的計算
function DataAnalytics({ data }) {
const processedData = useMemo(() => {
// 假設這是一個復雜的數據處理函數
return data.map(item => ({
...item,
processed: expensiveOperation(item)
}));
}, [data]); // 只在 data 改變時重新計算
return (
<div>
{processedData.map(item => (
<div key={item.id}>{item.processed}</div>
))}
</div>
);
}4.2 避免子組件不必要的重新渲染
function ParentComponent({ items }) {
// 記憶對象或數組類型的 props
const memoizedValue = useMemo(() => ({
data: items,
config: {
sortBy: 'name',
filterBy: 'active'
}
}), [items]);
return <ChildComponent options={memoizedValue} />;
}4.3 復雜對象的派生狀態(tài)
function UserDashboard({ user, transactions }) {
// 計算用戶統(tǒng)計信息
const userStats = useMemo(() => {
return {
totalSpent: transactions.reduce((sum, t) => sum + t.amount, 0),
averageSpent: transactions.length
? transactions.reduce((sum, t) => sum + t.amount, 0) / transactions.length
: 0,
mostFrequentCategory: calculateMostFrequentCategory(transactions)
};
}, [transactions]);
return (
<div>
<UserInfo user={user} />
<UserStatistics stats={userStats} />
</div>
);
}5. 性能優(yōu)化最佳實踐
5.1 合理使用 React.memo
// ? 好的使用場景：純組件，props 很少改變
const PureComponent = React.memo(function PureComponent({ data }) {
return <div>{/* 渲染邏輯 */}</div>;
});
// ? 不好的使用場景：props 經常變化
const FrequentlyChangingComponent = React.memo(function FrequentlyChangingComponent({ date }) {
return <div>{date.toLocaleTimeString()}</div>;
});5.2 合理使用 useMemo
// ? 好的使用場景：計算開銷大
const expensiveValue = useMemo(() => {
return someExpensiveOperation(props.data);
}, [props.data]);
// ? 不好的使用場景：計算開銷小
const simpleValue = useMemo(() => {
return props.value + 1;
}, [props.value]); // 這種情況直接計算即可5.3 配合 useCallback 使用
function SearchComponent({ onSearch }) {
const [query, setQuery] = useState('');
// 記憶回調函數
const handleSearch = useCallback(() => {
onSearch(query);
}, [query, onSearch]);
// 記憶計算結果
const searchResults = useMemo(() => {
return performExpensiveSearch(query);
}, [query]);
return (
<div>
<input
value={query}
onChange={e => setQuery(e.target.value)}
/>
<button onClick={handleSearch}>搜索</button>
<ResultsList results={searchResults} />
</div>
);
}
// 使用 React.memo 優(yōu)化 ResultsList
const ResultsList = React.memo(function ResultsList({ results }) {
return (
<ul>
{results.map(result => (
<li key={result.id}>{result.title}</li>
))}
</ul>
);
});6. 注意事項
不要過度優(yōu)化
- 只在真正需要的地方使用 memo 和 useMemo
- 性能測量驗證優(yōu)化效果
依賴項的正確使用
- 確保依賴項數組包含所有需要的值
- 避免依賴項過多導致優(yōu)化失效
避免在循環(huán)中使用 useMemo
// ? 錯誤示例
{items.map(item => {
const memoizedValue = useMemo(() => compute(item), [item]);
return <div>{memoizedValue}</div>;
})}考慮內存使用
- memo 和 useMemo 會占用額外的內存
- 在內存受限的環(huán)境中要謹慎使用
7. 性能優(yōu)化決策流程
- 首先評估是否真的需要優(yōu)化
- 使用 React DevTools Profiler 識別性能問題
- 選擇合適的優(yōu)化策略：
- 組件重新渲染優(yōu)化：使用 React.memo
- 計算結果優(yōu)化：使用 useMemo
- 回調函數優(yōu)化：使用 useCallback
- 測試優(yōu)化效果
- 持續(xù)監(jiān)控性能
通過合理使用 React.memo 和 useMemo，我們可以顯著提升 React 應用的性能。但記住，過度優(yōu)化可能會適得其反，應該在實際需要時才進行優(yōu)化。
到此這篇關于React 中hooks之 React.memo 和 useMemo用法總結的文章就介紹到這了,更多相關React React.memo 和 useMemo內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
react-redux中connect的裝飾器用法@connect詳解
這篇文章主要介紹了react-redux中connect的裝飾器用法@connect詳解,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了React-Native做一個文本輸入框組件的實現代碼，非常具有實用價值，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了React?如何向url中添加參數，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
React工作流程及Error Boundaries實現過程講解
這篇文章主要介紹了React工作流程及Error Boundaries實現過程講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-02-02
React+Typescript創(chuàng)建項目的實現步驟
通過React組件庫和TypeScript的強類型特性,開發(fā)者可以創(chuàng)建出具有優(yōu)秀用戶體驗和穩(wěn)定性的Web應用程序,本文主要介紹了React+Typescript創(chuàng)建項目的實現步驟,感興趣的可以了解一下2023-08-08
React?Hooks--useEffect代替常用生命周期函數方式
這篇文章主要介紹了React?Hooks--useEffect代替常用生命周期函數方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
高階組件（Higher-Order?Component,HOC）是一種用于在?React?中復用組件邏輯的技術,這篇文章主要介紹了React常見的?HOC?使用案例示例代碼,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了React Ant Design樹形表格的復雜增刪改操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了React獲取DOM和獲取組件實例的方式,如何創(chuàng)建refs來獲取對應的DOM呢?目前有三種方式，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
本文主要介紹了移動端點擊事件的300ms延遲問題,并詳細的介紹了三種解決方法,具有一定的參考價值,感興趣的可以了解一下2025-03-03