快捷導(dǎo)航

React?記憶緩存的三種方法實(shí)現(xiàn)

更新時(shí)間：2025年09月18日 10:14:51 作者：歪歪100

本文主要介紹了React?記憶緩存的三種方法實(shí)現(xiàn),包含React.memo、useMemo、useCallback,用于避免不必要的組件重渲染和計(jì)算,感興趣的可以了解一下

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)銷影響性能
避免過(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)文章

React學(xué)習(xí)筆記之高階組件應(yīng)用
這篇文章主要介紹了React 高階組件應(yīng)用，詳細(xì)的介紹了什么是React高階組件和具體使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
React Native 環(huán)境搭建的教程
本篇文章主要介紹了React Native 環(huán)境搭建的教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
基于react hooks,zarm組件庫(kù)配置開(kāi)發(fā)h5表單頁(yè)面的實(shí)例代碼
這篇文章主要介紹了基于react hooks,zarm組件庫(kù)配置開(kāi)發(fā)h5表單頁(yè)面,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
使用 React 和 Threejs 創(chuàng)建一個(gè)VR全景項(xiàng)目的過(guò)程詳解
這篇文章主要介紹了使用 React 和 Threejs 創(chuàng)建一個(gè)VR全景項(xiàng)目的過(guò)程詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
React?component.forceUpdate()強(qiáng)制重新渲染方式
這篇文章主要介紹了React?component.forceUpdate()強(qiáng)制重新渲染方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
React Native react-navigation 導(dǎo)航使用詳解
本篇文章主要介紹了React Native react-navigation 導(dǎo)航使用詳解，詳解的介紹了react-navigation導(dǎo)航的使用，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-12-12
react-native中ListView組件點(diǎn)擊跳轉(zhuǎn)的方法示例
ListView作為React Native的核心組件,用于高效地顯示一個(gè)可以垂直滾動(dòng)的變化的數(shù)據(jù)列表。下面這篇文章主要給大家介紹了關(guān)于react-native中ListView組件點(diǎn)擊跳轉(zhuǎn)的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-09-09
React useImperativeHandle處理組件狀態(tài)和生命周期用法詳解
React Hooks 為我們提供了一種全新的方式來(lái)處理組件的狀態(tài)和生命周期,useImperativeHandle是一個(gè)相對(duì)較少被提及的Hook,但在某些場(chǎng)景下,它是非常有用的,本文將深討useImperativeHandle的用法,并通過(guò)實(shí)例來(lái)加深理解
2023-09-09
React實(shí)現(xiàn)下拉框的key,value的值同時(shí)傳送
這篇文章主要介紹了React實(shí)現(xiàn)下拉框的key,value的值同時(shí)傳送方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
react ant design樣式覆蓋問(wèn)題
這篇文章主要介紹了react ant design樣式覆蓋問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11