快捷導(dǎo)航

React利用React.memo和useCallback緩存彈窗組件

更新時(shí)間：2025年07月04日 08:27:56 作者：前端小怪獸zmy

本文主要介紹了React利用React.memo和useCallback緩存彈窗組件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

父組件TenantManage在每次執(zhí)行useState時(shí)會(huì)重新渲染，導(dǎo)致子組件UserForm也會(huì)觸發(fā)重新渲染，即使父組件做的操作和UserForm一點(diǎn)關(guān)系也沒(méi)有，也會(huì)觸發(fā)

解決方式：利用React.memo緩存子組件，在父組件使用緩存版本的MyUserForm

import UserForm from './userForm' //彈窗組件

function TenantManage() {
	return (
		<div className='userList'>
			{/* 彈窗組件 */}
			<MyUserForm
				visiable={isOpenModal}
				closeModel={closeModel}
				modelTitle={modelTitle}
				getUserListWrap={getUserListWrap}></MyUserForm>
			<Card className='searchFlex'>
			</Card>
		</div>
	)
}

const MyUserForm = React.memo(UserForm) //緩存版本的模態(tài)框組件
export default TenantManage

但是上述還是有問(wèn)題，父組件useState子組件還是會(huì)重新渲染

因?yàn)楦附M件給子組件傳遞了closeModel這個(gè)方法，和visiable、modelTitle這些屬性，雖然React.memo能將屬性緩存，但是沒(méi)辦法把函數(shù)緩存。

深入解釋：

1、React.memo會(huì)對(duì)組件的props進(jìn)行淺比較（即比較前后props的每個(gè)屬性值是否相等，對(duì)于基本類型比較值，對(duì)于引用類型比較引用地址）。

2. 對(duì)于屬性中的函數(shù)，由于每次父組件渲染都會(huì)創(chuàng)建一個(gè)新的函數(shù)實(shí)例（引用改變），所以即使函數(shù)內(nèi)容相同，React.memo也會(huì)認(rèn)為該prop發(fā)生了變化，從而導(dǎo)致子組件重新渲染。

最終解決方法：使用useCallback緩存函數(shù)

    // 原來(lái)的方法
	// function closeModel() {
	// 	setIsOpenModal(false)
	// }	

    //使用useCallback緩存
	   const closeModel = useCallback(() => {
		  setIsOpenModal(false)
	}, [])

到此這篇關(guān)于React利用React.memo和useCallback緩存彈窗組件的文章就介紹到這了,更多相關(guān)React緩存彈窗內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

關(guān)于react中組件通信的幾種方式詳解
這篇文章主要給大家介紹了關(guān)于react中組件通信的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
基于React實(shí)現(xiàn)一個(gè)todo打勾效果
這篇文章主要為大家詳細(xì)介紹了如何基于React實(shí)現(xiàn)一個(gè)todo打勾效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程詳細(xì)講解
最近在寫 React Native 項(xiàng)目，調(diào)試應(yīng)用時(shí)發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢(shì)指示條區(qū)域不是透明的，看起來(lái)很難受。研究了一下這個(gè)問(wèn)題，現(xiàn)在總結(jié)一下解決方案，這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程
2023-01-01
react中使用echarts,并實(shí)現(xiàn)tooltip循環(huán)輪播方式
這篇文章主要介紹了react中使用echarts,并實(shí)現(xiàn)tooltip循環(huán)輪播方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
React 組件間的通信示例
這篇文章主要介紹了React 組件間的通信示例，主要通信劃分為三種，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
react虛擬列表實(shí)現(xiàn)及原理小結(jié)
React虛擬列表是前端性能優(yōu)化的核心技術(shù)之一,尤其在需要渲染上萬(wàn)條數(shù)據(jù)的表格或列表時(shí)很關(guān)鍵,下面就來(lái)介紹一下react虛擬列表的實(shí)現(xiàn),感興趣的可以了解一下
2025-09-09
React創(chuàng)建虛擬DOM的兩種方式小結(jié)
本文主要介紹了兩種創(chuàng)建React虛擬DOM的方式,包括JS方式和jsx方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2025-01-01
react跳轉(zhuǎn)后路由變了頁(yè)面沒(méi)刷新的解決
這篇文章主要介紹了react跳轉(zhuǎn)后路由變了頁(yè)面沒(méi)刷新的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
react-native 實(shí)現(xiàn)漸變色背景過(guò)程
這篇文章主要介紹了react-native 實(shí)現(xiàn)漸變色背景過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
React18系列reconciler從0實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了React18系列reconciler從0實(shí)現(xiàn)過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01