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使用Echarts/Ant-design-charts的案例代码
这篇文章主要介绍了React使用Echarts/Ant-design-charts的实例代码，本文通过实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-11-11
这篇文章主要为大家详细介绍了的React Refs属性，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了详解React之key的使用和实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
本文主要介绍了React中获取组件对应DOM元素的多种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-02-02
React应用中的路由鉴权是确保用户仅能访问其授权页面的方式,用于已登录或具有访问特定页面所需的权限,这篇文章就来记录下React实现路由鉴权的流程,需要的朋友可以参考下2024-07-07
本篇文章主要介绍了react 父组件与子组件之间的值传递的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了React配置代理方式(proxy),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
高阶组件也就是我们常说的HOC,是React中用于复用组件逻辑的一种高级技巧。这篇文章主要通过一些示例带大家学习一下高阶组件的使用，希望对大家有所帮助2023-04-04
React SSR架构Stream Rendering与Suspense for Data Fetching
这篇文章主要为大家介绍了React SSR架构Stream Rendering与Suspense for Data Fetching解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了详解基于React.js和Node.js的SSR实现方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
最新评论