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

news2024/11/27 20:25:15

需求:

在这里插入图片描述
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的自定义函数使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/992626.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【ESP32】串口+wifi 透传,以及回调函数的使用

本文主要记录【ESP32】串口wifi 透传】的学习记录,主要包括 1.串口的AT 模式和透传模式 2. 串口命令解析 3. socket 连接 4. 回调函数的使用 【ESP32】串口wifi 透传,以及回调函数的使用 1. 函数接口说明2.开发环境3.硬件连接4.测试结果4.1发送 ATWS 命令…

Linux学习笔记-Ubuntu系统用户、群组、权限管理

一、概述 本文记录Ubuntu系统下通过命令操作用户账户进行管理。 Ubuntu系统版本: Linux ubuntu 5.15.0-1034-raspi #37-Ubuntu SMP PREEMPT Mon Jul 17 10:02:14 UTC 2023 aarch64 aarch64 aarch64 GNU/Linux 注:查看系统版本号的指令如下 uname -…

YOLOV7改进-针对小目标的NWD(损失函数)

link 1、复制这些 2、utils-loss,这里加 3、把这几行复制到utiils的loss.py 4、先对CoputerLoss类做修改 5、把那一行替换成这个 6、修改 7、iou_ration是超参,可以调,如果小目标比较多的话,这个值可以低一些,…

Vuex - state 状态(获取和使用共享数据)

文章目录 一、state是什么?二、state状态的作用三、如何使用store数据呢?使用数据的两种方式:1. 通过store 直接访问2. 通过辅助函数访问(简化) 一、state是什么? state是状态(数据) , 类似于v…

redis集群最少使用三个主节点的原因

集群最少三个主节点的原因 https://redis.io/docs/management/scaling/ 官网建议,搭建 redis 集群最少三主三从。 但是这么做是出于什么考虑呢? https://blog.csdn.net/qq_35549286/article/details/127057374 借鉴这位的解答 为什么是三个? cluster各…

骨传导与入耳式耳机哪种音质好?该如何选择?

骨传导耳机和传统耳机的定位不同,所以没有可比性,如果一定要说哪款耳机音质好,答案是入耳式耳机音质比较好! 首先入耳式耳机是直接塞入耳朵佩戴,会最大程度减少漏音,同时不会改变音质,会直接传…

构建自定义美颜应用:全局美颜SDK的开发指南

美颜技术已经成为许多应用程序和平台的标配之一,为用户提供了改善外观的机会。为了在你的应用中提供自定义的美颜功能,你可以考虑使用全局美颜SDK。本文将向你介绍如何构建自定义美颜应用,以及开发全局美颜SDK的关键步骤和技巧。 一、明确需…

Revit SDK 介绍:RayTraceBounce 光线反弹

前言 这个例子模拟光线反弹。 内容 通过修改参数,从(0,0,0)点向(1,0,0)方向射出光线,经过若干次反弹之后的结果。如图所示: 在Revit API 中&…

通过 http-server 运行刚打包出来的脚手架项目

这里 我打包了自己的vue项目 react其实也一样 如果我直接 打开打包出来的 dist 下面的index.html 会出现白屏资源找不到 或者跨域等问题 这个问题其实配个nginx也能解决 但是其实如果只是想做个测试 nginx就太麻烦了 我们可以通过npm指令 全局安装一个http-server 终端执行 …

每日刷题|回溯法解决全排列问题第二弹之解决字符串、字母大小排列问题

食用指南:本文为作者刷题中认为有必要记录的题目 前置知识:回溯法经典问题之全排列 ♈️今日夜电波:带我去找夜生活—告五人 0:49 ━━━━━━️💟──────── 4:59 …

OpenRoads Designer道路旁添加公交车停车区

在道路工程建模时如果需要在路旁添加公交车停车区,如下图所示,可通过对道路轴线进行局部偏移的方式实现。 在道路旁添加如上图所示的公交车停车区操作步骤: 1、使用Geometry下的Single Offset Partial将路线中的一段进行偏移: 参数…

亚马逊、ManoMano等跨境电商平台测评还能做吗?

亚马逊测评是卖家通过真实购买商品并撰写评价来获取评价权利的过程 卖家账号发布产品后,测评买家账号进入商铺进行购买并对商品质量、外观、卖家服务态度和物流体验等方面进行点星留评 在亚马逊卖家运营中,评论是一个关键而必不可少的环节,…

本地起一个VUE 前端项目

#安装 安装 Vue CLI 3: Vue CLI是一个用于创建和管理Vue项目的命令行工具 npm install -g vue/cli#查看更详细的告警信息 npm install -g vue/cli --verbose#检查项目的依赖关系 ,保持项目的依赖关系最新和安全 npm audit npm audit fix#查看版本 vue --version#创建…

oled或数码管点阵的字模矩阵的原理讲解

通过取模软件得到的T字符的矩阵分析 字模选项中常用的设置的意义: **字宽和字高:**显示字符能够使用的长宽灯数量,也可以理解为像素 **点阵格式:**需要考虑实际焊接电路。阴码:灯共阴极,控制器输出高电位&…

Linux权限问题

文章目录 前言一、shell 命令1、什么是 shell?2、什么是 shell 脚本?3、shell环境4、总结 二、Linux权限1、su命令2、Linux文件类型3、Linux文件权限4、文件访问权限的相关设置4.1 chmod指令4.2 chown指令4.3 chgrp指令4.4 总结 前言 一、shell 命令 1、什么是 sh…

Android开发之lint代码检测编写和使用方法

文章目录 前言项目结构待检测项目lint检查器 依赖方式待检测项目lint检查器 代码编写方法调用检测Detector注册Detector编写 Toast硬编码检测Detector注册Detector编写 使用壳工程打包待检测项目使用kotlin代码java代码 AS识别结果kotlin代码java代码 命令行检测 参考文献 前言…

Fushion 360齿轮组制作教程

本教程总结 Kevin小哥的教程,原视频教程点击这里,笔者录制的教程视频见fushion 360齿轮制作 Fushion 360齿轮组制作教程 基本步骤添加齿轮工具相关设置绘制底板创建演示动画掏空较大的齿轮 视频教程及成品展示 基本步骤 添加齿轮工具 选择使用工具&…

【深度学习】 Python 和 NumPy 系列教程(三):Python容器:1、列表(初始化、索引和切片、常用操作、常用函数、拆包、遍历)

目录 一、前言 二、实验环境 三、Python容器 0. 容器介绍 1. 列表 1. 初始化 a. 创建空列表 b. 使用现有元素初始化列表 c. 使用列表生成式 d. 复制列表 2. 索引和切片 a. 索引 b. 负数索引 c. 切片 3. 常用操作(更新、删除) a. 更新单个…

【漏洞复现】Tenda路由器存在密码泄露

漏洞描述 腾达W15E路由器外置4根增强型360全向天线,苛刻调校到0.01毫米级的零干扰间距,科学独立布局的信号放大器PA,穿墙性能更强劲,覆盖范围更广,在哪都有好信号。 该型号的路由器系统存在密码泄露漏洞,…

【MySQL】聊聊数据库高可用

对于任何一个互联网公司来说,必定涉及到存储系统,而一般主流的使用MySQL进行存储数据,但是如果只是部署一台数据库,数据丢失的话,其实没有办法进行有效的恢复,那么就会造成一定的损失。要么就是直接的损失&…