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的自定义函数使用

相关推荐
我命由我123454 小时前
React Router 6 - 编程式路由导航、useInRouterContext、useNavigationType
前端·javascript·react.js·前端框架·html·ecmascript·js
橙露5 小时前
JavaScript 异步编程:Promise、async/await 从原理到实战
开发语言·javascript·ecmascript
我命由我123456 小时前
React Router 6 - 嵌套路由、路由传递参数
前端·javascript·react.js·前端框架·html·ecmascript·js
十六年开源服务商6 小时前
2026年WordPress网站地图完整指南
java·前端·javascript
英俊潇洒美少年7 小时前
MessageChannel 如何实现时间切片
javascript·react.js·ecmascript
技术钱8 小时前
react数据大屏四种适配方案
javascript·react.js·ecmascript
李明卫杭州8 小时前
JavaScript 严格模式下 arguments 的区别
前端·javascript
一次旅行8 小时前
今日心理学知识分享(三)
开发语言·javascript·程序人生·ecmascript
牛十二9 小时前
openclaw安装mcporter搜索小红书
开发语言·javascript·ecmascript
小金鱼Y9 小时前
🔥 前端人必看:浏览器安全核心知识点全解析(XSS/CSRF/DDoS)
前端·javascript·安全