快捷導(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)文章

React使用Echarts/Ant-design-charts的案例代碼
這篇文章主要介紹了React使用Echarts/Ant-design-charts的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-11-11
React中的Refs屬性你來(lái)了解嗎
這篇文章主要為大家詳細(xì)介紹了的React?Refs屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
詳解React之key的使用和實(shí)踐
這篇文章主要介紹了詳解React之key的使用和實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
React獲取組件對(duì)應(yīng)的DOM元素多種實(shí)現(xiàn)方法
本文主要介紹了React中獲取組件對(duì)應(yīng)DOM元素的多種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2025-02-02
React實(shí)現(xiàn)路由鑒權(quán)的實(shí)例詳解
React應(yīng)用中的路由鑒權(quán)是確保用戶僅能訪問(wèn)其授權(quán)頁(yè)面的方式,用于已登錄或具有訪問(wèn)特定頁(yè)面所需的權(quán)限,這篇文章就來(lái)記錄下React實(shí)現(xiàn)路由鑒權(quán)的流程,需要的朋友可以參考下
2024-07-07
react 父組件與子組件之間的值傳遞的方法
本篇文章主要介紹了react 父組件與子組件之間的值傳遞的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
React配置代理方式(proxy)
這篇文章主要介紹了React配置代理方式(proxy),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
React用法之高階組件的用法詳解
高階組件也就是我們常說(shuō)的HOC,是React中用于復(fù)用組件邏輯的一種高級(jí)技巧。這篇文章主要通過(guò)一些示例帶大家學(xué)習(xí)一下高階組件的使用，希望對(duì)大家有所幫助
2023-04-04
React?SSR架構(gòu)Stream?Rendering與Suspense?for?Data?Fetching
這篇文章主要為大家介紹了React?SSR架構(gòu)Stream?Rendering與Suspense?for?Data?Fetching解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
詳解基于React.js和Node.js的SSR實(shí)現(xiàn)方案
這篇文章主要介紹了詳解基于React.js和Node.js的SSR實(shí)現(xiàn)方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03