React：利用React.memo和useCallback缓存弹窗组件
父组件TenantManage在每次执行useState时会重新渲染，导致子组件UserForm也会触发重新渲染，即使父组件做的操作和UserForm一点关系也没有，也会触发
解决方式：利用React.memo缓存子组件，在父组件使用缓存版本的MyUserForm
import UserForm from './userForm' //弹窗组件function TenantManage() {return (<div className='userList'>{/* 弹窗组件 */}<MyUserFormvisiable={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)}, [])