React?記憶緩存的三種方法實(shí)現(xiàn)
更新時間：2025年09月18日 10:14:51 作者：歪歪100
本文主要介紹了React?記憶緩存的三種方法實(shí)現(xiàn),包含React.memo、useMemo、useCallback,用于避免不必要的組件重渲染和計算,感興趣的可以了解一下
在 React 中，記憶緩存（Memoization）是一種優(yōu)化技術(shù)，用于避免不必要的組件重渲染和計算，提升應(yīng)用性能。主要通過三個 API 實(shí)現(xiàn)： React.memo、 useMemo 和 useCallback。
1. React.memo
用于緩存組件，避免組件在 props 未變化時重新渲染。適用于純函數(shù)組件。
// 緩存組件，只有當(dāng) props 真正改變時才重新渲染
const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
// 自定義比較函數(shù)，返回 true 表示 props 未變，不重新渲染
return prevProps.id === nextProps.id;
});
2. useMemo
用于緩存計算結(jié)果，避免每次渲染時重復(fù)執(zhí)行昂貴的計算。
function MyComponent({ a, b }) {
// 緩存計算結(jié)果，只有當(dāng) a 或 b 變化時才重新計算
const result = useMemo(() => {
// 這里是昂貴的計算
return expensiveCalculation(a, b);
}, [a, b]); // 依賴數(shù)組
return <div>{result}</div>;
}
3. useCallback
用于緩存函數(shù)引用，配合 React.memo 使用，避免因函數(shù)引用變化導(dǎo)致子組件不必要的重渲染。
function ParentComponent() {
const [count, setCount] = useState(0);
// 緩存函數(shù)引用，只有當(dāng)依賴變化時才創(chuàng)建新函數(shù)
const handleClick = useCallback(() => {
console.log('Button clicked');
}, []); // 空依賴數(shù)組，表示函數(shù)不會變化
return <MemoizedChild onButtonClick={handleClick} />;
}
使用場景與注意事項
- 只對昂貴的計算或渲染操作使用記憶緩存，否則可能因緩存本身的開銷影響性能
- 避免過度使用，簡單的計算或組件渲染通常不需要緩存
- 依賴數(shù)組必須正確設(shè)置，否則可能導(dǎo)致使用過時的值
useMemo和useCallback都是"最佳努力"的緩存，React 可能在某些情況下丟棄緩存
合理使用這些記憶緩存技術(shù)，可以顯著提升 React 應(yīng)用在處理復(fù)雜狀態(tài)和大量組件時的性能。
到此這篇關(guān)于React 記憶緩存的三種方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)React 記憶緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何在React中實(shí)現(xiàn)插槽，文中的示例代碼講解詳細(xì)，對我們的學(xué)習(xí)或工作具有一定的借鑒價值，需要的可以了解一下2023-03-03
構(gòu)建高性能?React?應(yīng)用程序的關(guān)鍵之一是避免不必要的重新渲染,React?的渲染引擎是高效的,但防止在不需要的地方重新渲染仍然至關(guān)重要,在這篇文章中,我們將介紹常見錯誤以及如何避免它們,需要的朋友可以參考下2024-10-10
在現(xiàn)代前端開發(fā)中,表單是用戶與應(yīng)用程序進(jìn)行交互的最主要方式之一,React,作為一款強(qiáng)大的視圖庫,提供了多種靈活的方式來處理表單數(shù)據(jù),本文將深入探討 React 中處理表單輸入的幾種主要方法,需要的朋友可以參考下2025-08-08
這篇文章主要介紹了深入理解react-router@4.0 使用和源碼解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了React Native從類組件到函數(shù)組件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
reset.css瀏覽器默認(rèn)樣式表重置(user?agent?stylesheet)的示例代碼
這篇文章主要介紹了reset.css瀏覽器默認(rèn)樣式表重置（user?agent?stylesheet）,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-12-12
flouting?ui定位組件完美替代ant?deisgn使用詳解
這篇文章主要為大家介紹了flouting?ui定位組件完美替代ant?deisgn使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React如何使用axios請求數(shù)據(jù)并把數(shù)據(jù)渲染到組件
這篇文章主要介紹了React如何使用axios請求數(shù)據(jù)并把數(shù)據(jù)渲染到組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
state 中可以保存任意類型的JavaScript值，包括對象，但是，不應(yīng)該直接修改存放在 React state 中的對象，這篇文章主要介紹了React?18更新state中的對象,需要的朋友可以參考下2023-08-08
關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決
這篇文章主要給大家介紹了關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01