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