React利用React.memo和useCallback缓存弹窗组件
更新时间：2025年07月04日 08:27:56 作者：前端小怪兽zmy
本文主要介绍了React利用React.memo和useCallback缓存弹窗组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
父组件TenantManage在每次执行useState时会重新渲染，导致子组件UserForm也会触发重新渲染，即使父组件做的操作和UserForm一点关系也没有，也会触发
解决方式：利用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) //缓存版本的模态框组件
export default TenantManage但是上述还是有问题，父组件useState子组件还是会重新渲染
因为父组件给子组件传递了closeModel这个方法，和visiable、modelTitle这些属性，虽然React.memo能将属性缓存，但是没办法把函数缓存。
深入解释：
1、React.memo会对组件的props进行浅比较（即比较前后props的每个属性值是否相等，对于基本类型比较值，对于引用类型比较引用地址）。
2. 对于属性中的函数，由于每次父组件渲染都会创建一个新的函数实例（引用改变），所以即使函数内容相同，React.memo也会认为该prop发生了变化，从而导致子组件重新渲染。
最终解决方法：使用useCallback缓存函数
// 原来的方法
// function closeModel() {
// setIsOpenModal(false)
// }
//使用useCallback缓存
const closeModel = useCallback(() => {
setIsOpenModal(false)
}, [])到此这篇关于React利用React.memo和useCallback缓存弹窗组件的文章就介绍到这了,更多相关React缓存弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于react中组件通信的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
这篇文章主要为大家详细介绍了如何基于React实现一个todo打勾效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
React Native全面屏状态栏和底部导航栏适配教程详细讲解
最近在写 React Native 项目，调试应用时发现顶部状态栏和底部全面屏手势指示条区域不是透明的，看起来很难受。研究了一下这个问题，现在总结一下解决方案，这篇文章主要介绍了React Native全面屏状态栏和底部导航栏适配教程2023-01-01
react中使用echarts,并实现tooltip循环轮播方式
这篇文章主要介绍了react中使用echarts,并实现tooltip循环轮播方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了React 组件间的通信示例，主要通信划分为三种，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
React虚拟列表是前端性能优化的核心技术之一,尤其在需要渲染上万条数据的表格或列表时很关键,下面就来介绍一下react虚拟列表的实现,感兴趣的可以了解一下2025-09-09
本文主要介绍了两种创建React虚拟DOM的方式,包括JS方式和jsx方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
这篇文章主要介绍了react跳转后路由变了页面没刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了react-native 实现渐变色背景过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了React18系列reconciler从0实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
最新评论