React利用React.memo和useCallback緩存彈窗組件
父組件TenantManage在每次執(zhí)行useState時會重新渲染，導(dǎo)致子組件UserForm也會觸發(fā)重新渲染，即使父組件做的操作和UserForm一點關(guān)系也沒有，也會觸發(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但是上述還是有問題，父組件useState子組件還是會重新渲染
因為父組件給子組件傳遞了closeModel這個方法，和visiable、modelTitle這些屬性，雖然React.memo能將屬性緩存，但是沒辦法把函數(shù)緩存。
深入解釋：
1、React.memo會對組件的props進(jìn)行淺比較（即比較前后props的每個屬性值是否相等，對于基本類型比較值，對于引用類型比較引用地址）。
2. 對于屬性中的函數(shù)，由于每次父組件渲染都會創(chuàng)建一個新的函數(shù)實例（引用改變），所以即使函數(shù)內(nèi)容相同，React.memo也會認(rèn)為該prop發(fā)生了變化，從而導(dǎo)致子組件重新渲染。
最終解決方法：使用useCallback緩存函數(shù)
// 原來的方法
// function closeModel() {
// setIsOpenModal(false)
// }
//使用useCallback緩存
const closeModel = useCallback(() => {
setIsOpenModal(false)
}, [])到此這篇關(guān)于React利用React.memo和useCallback緩存彈窗組件的文章就介紹到這了,更多相關(guān)React緩存彈窗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React使用Echarts/Ant-design-charts的案例代碼
這篇文章主要介紹了React使用Echarts/Ant-design-charts的實例代碼，本文通過實例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了的React?Refs屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了詳解React之key的使用和實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
React獲取組件對應(yīng)的DOM元素多種實現(xiàn)方法
本文主要介紹了React中獲取組件對應(yīng)DOM元素的多種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
React應(yīng)用中的路由鑒權(quán)是確保用戶僅能訪問其授權(quán)頁面的方式,用于已登錄或具有訪問特定頁面所需的權(quán)限,這篇文章就來記錄下React實現(xiàn)路由鑒權(quán)的流程,需要的朋友可以參考下2024-07-07
本篇文章主要介紹了react 父組件與子組件之間的值傳遞的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了React配置代理方式(proxy),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
高階組件也就是我們常說的HOC,是React中用于復(fù)用組件邏輯的一種高級技巧。這篇文章主要通過一些示例帶大家學(xué)習(xí)一下高階組件的使用，希望對大家有所幫助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實現(xiàn)方案
這篇文章主要介紹了詳解基于React.js和Node.js的SSR實現(xiàn)方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03