react memo判断刷新机制 自定义的比较函数 避免重复渲染

需求:


1. 需要在courseList参数变化时重新渲染组件。
2. 需要在currentWeekNumber参数 等于我指定值才重新渲染组件。
3.以上2个条件同时满足。

遇到的坑

一开始实现了我上面指定的问题需要的函数,后面发现怎么都刷新不了,经过深入观察发现memo在第一次成功渲染后,
之后arePropsEqual函数一直都返回为true 导致Swiper参数
current={currentWeekNumber}
一直处于初始化值
,导致后续当我更新currentWeekNumber的值的时候发现CourseListELement组件根本更新不了(因为后续我触发给swiper参数current的值就是初始值) 明明自定义的比较函数arePropsEqual 一直在返回false 通知CourseListELement组件重新渲染 调试才发现swiper的参数从一开始初始化后一直没有更新

解决方法


给swiper组件添加一个随机key 这样在比较函数arePropsEqual返回false通知更新的时候 swiper才会重新更新,不然没有key的干扰swiper所有参数会一直处于初始化值的状态

注意! key={Math.random()} 不能随便乱用 切换页面会导致当前用key的组件一直重新渲染 非常耗运行资源。建议配合memo的自定义函数使用

相关推荐
C_心欲无痕13 小时前
ts - 关于Object、object 和 {} 的解析与区别
开发语言·前端·javascript·typescript
全栈前端老曹13 小时前
【包管理】read-pkg-up 快速上手教程 - 读取最近的 package.json 文件
前端·javascript·npm·node.js·json·nrm·package.json
JQLvopkk13 小时前
Vue框架技术详细介绍及阐述
前端·javascript·vue.js
笔COOL创始人13 小时前
requestAnimationFrame 动画优化实践指南
前端·javascript·面试
sophie旭14 小时前
性能监控之首屏性能监控小实践
前端·javascript·性能优化
北辰alk14 小时前
React Consumer 找不到 Provider 的处理方案
react.js
Amumu1213814 小时前
React 前端请求
前端·react.js·okhttp
38242782714 小时前
JS表单提交:submit事件的关键技巧与注意事项
前端·javascript·okhttp
interception14 小时前
js逆向之京东原型链补环境h5st
javascript·爬虫·网络爬虫