React利用React.memo和useCallback缓存弹窗组件
作者：前端小怪兽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缓存弹窗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！