react18中的计算属性及useMemo的性能优化技巧
react18里面的计算属性和使用useMemo来提升组件性能的方法
计算属性
- 实现效果

- 代码实现
函数式组件极简洁的实现,就这样
import { useState } from "react";
function FullName() {const [firstName, setFirstName] = useState("");const [lastName, setLastName] = useState("");const fullName = firstName + " " + lastName;return (<><h1>fullname:{fullName}</h1><label>First Name :<inputtype="text"value={firstName}onChange={(e) => setFirstName(e.target.value)}/></label><br /><label>Last Name :<inputtype="text"value={lastName}onChange={(e) => setLastName(e.target.value)}/></label></>);
}export default FullName;
计算大的方法缓存
子组件会因为props和state的变化而重新渲染,这其中如果有很大计算量的方法的话,就会严重拖慢页面加载速度。像下面这种就是因为一个无关的更新,导致计算一会在执行,计算量大的话性能损耗很大

import { useState, useMemo } from "react";
function TodoList({ todos, filter }) {const [newTodo, setNewTodo] = useState("");const visibleTodos = getFilteredTodos(todos, filter);return (<><ul>{visibleTodos.map((todo) => {return <li>{todo.name}</li>;})}</ul>{newTodo}<br /><input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} /></>);
}function getFilteredTodos(todos, filter) {console.log("🚀 ~ getFilteredTodos ~ todos:", todos);return todos.filter((todo) => {return filter.call(null, todo);});
}
export default TodoList;
优化代码
import { useState, useMemo } from "react";
function TodoList({ todos, filter }) {const [newTodo, setNewTodo] = useState("");const visibleTodos = useMemo(() => getFilteredTodos(todos, filter),[todos, filter]);return (<><ul>{visibleTodos.map((todo) => {return <li>{todo.name}</li>;})}</ul>{newTodo}<br /><input value={newTodo} onChange={(e) => setNewTodo(e.target.value)} /></>);
}function getFilteredTodos(todos, filter) {console.log("🚀 ~ getFilteredTodos ~ todos:", todos);return todos.filter((todo) => {return filter.call(null, todo);});
}
export default TodoList;

这会告诉 React,除非 todos 或 filter 发生变化,否则不要重新执行传入的函数,这样我们我们的计算就不会在无关的状态变化时执行了,极大的提升了性能。
相关文章:
react18中的计算属性及useMemo的性能优化技巧
react18里面的计算属性和使用useMemo来提升组件性能的方法 计算属性 实现效果 代码实现 函数式组件极简洁的实现,就这样 import { useState } from "react"; function FullName() {const [firstName, setFirstName] useState("");const [la…...
Python 实现高效的 SM4 大文件加密解密实战指南20241024
Python 实现高效的 SM4 大文件加密解密实战指南 引言 在数据安全领域,使用对称加密算法如SM4进行数据保护非常常见。特别是当处理大文件时,合理的内存和块大小管理以及加密解密效率变得尤为重要。本文将分享如何使用Python进行大文件的SM4加密解密操作&…...
数据结构~红黑树
文章目录 一、红黑树的概念二、红黑树的定义三、红黑树的插入四、红黑树的平衡五、红黑树的验证六、红黑树的删除七、完整代码八、总结 一、红黑树的概念 红黑树是一棵二叉搜索树,他的每个结点增加⼀个存储位来表示结点的颜色,可以是红色或者黑色。通过…...
【ROS GitHub使用】
提示:环境配置为Ubuntu20.04&ROS Noetic 文章目录 前言一、创建工作空间目录二、尝试从GitHub上下载一个源码包,对它进行编译,运行这个源码包1.打开script文件夹,右键文件夹空白区域,选择在中端中打开;…...
批量处理文件权限:解决‘/usr/bin/chmod: Argument list too long’的有效方法
批量处理文件权限:解决‘/usr/bin/chmod: Argument list too long’的有效方法 错误原因解决方案1. 分批处理2. 使用xargs3. 增加ARG_MAX限制4. 使用脚本 结论 在Linux系统中,有时你可能会遇到这样的错误消息:“/usr/bin/chmod: Argument lis…...
数据结构——树——二叉树——大小堆
目录 1>>导言 2>>树 2.1>>树的相关术语 2.2>>树的表示和应用场景 3>>二叉树 3.1>>完全二叉树 3.2>>大小根堆 4>>结语 1>>导言 上篇小编将队列的内容给大家讲完了,这篇要步入新的篇章,请宝…...
Android Junit 单元测试 | 依赖配置和编译报错解决
问题 为什么在依赖中添加了testImplement在build APK的时候还是会报错?是因为没有识别到test文件夹是test源代码路径吗? 最常见的配置有: implementation - 所有源代码集(包括test源代码集)中都有该依赖库.testImplementation - 依赖关系仅在test源代码…...
ffmpeg视频滤镜: 裁剪-crop
滤镜简述 crop官网链接 > FFmpeg Filters Documentation crop滤镜可以对视频进行裁剪,并且这个滤镜可以接受一些变量比如时间和帧数,这样我们实现动态裁剪,从而实现一些特效。 滤镜使用 参数 out_w <string> ..…...
身份证归属地查询接口-在线身份证归属地查询-身份证归属地查询API
接口简介:输入身份证号码可查询到所属地区、出生年日月以及性别。 接口地址:https://www.wapi.cn/api_detail/60/167.html 在线核验:https://www.wapi.cn/icard.html 网站地址:https://www.wapi.cn 返回格式:json,xml,…...
ESP32 S3 怎么开发基于ESP-RTC的音视频实时交互的应用,用语AI陪伴的领域
在ESP32-S3平台上开发基于ESP-RTC的音视频实时交互应用,尤其是在AI陪伴领域,涉及到音视频数据的采集、编码、传输和解码。ESP32-S3 具备较强的处理能力,且拥有丰富的接口和模块支持,可以用来实现这种功能。以下是一个完整的开发方…...
车载测试分享:UDS诊断、ECU刷写、CAN一致性测试、网络通讯测试、CANoe使用、报文解析、问题定位分析
FOTA模块中OTA的知识点:1.测试过程中发现哪几类问题? 可能就是一个单键的ecu,比如升了一个门的ecu,他的升了之后就关不上,还有就是升级组合ecu的时候,c屏上不显示进度条。 2.在做ota测试的过程中…...
预算不够,怎么跟KOL砍价?(内附砍价模板)
在当今的数字营销时代,海外红人(KOL)的影响力不容小觑。他们的一篇帖子、一个视频,甚至是一张照片,都有可能为企业带来巨大的流量和销量。 当企业满怀希望地找到一位粉丝众多、影响力强的KOL,准备洽谈合作…...
C#从零开始学习(GameObject实例)(unity Lab3)
这是书本中第三个unity Lab 在这次实验中,将学习如何使用C#编写代码用unity编写C#代码 GameObject实例 本次将完成的工作 将游戏资产配置在文件夹中创建材质把GameObject变成预制件脚本控制游戏防止球体重叠 将游戏资产配置在文件夹中 Script放代码 Prefabs放预制件 MAteria…...
谷歌地图 | 与 Android 版导航 SDK 集成的最佳实践
谷歌最近宣布了导航 SDK,它可以让您将熟悉的 Google 地图逐向导航体验无缝集成到您的 Android 和 iOS 应用程序中。 这篇博文概述了一些最佳实践,您可以使用这些实践为您的 Android 应用程序使用导航 SDK 构建流畅、一致且可靠的导航体验。 与导航地图…...
什么是 VolTE 中的 Slient Redial?它和 CSFB 什么关系?
目录 1. 什么是 Silent Redial(安静的重拨号)? 2. Silent Redial 信令流程概述 3. 总结 Silent Redial 和 CSFB 啥关系? 博主wx:yuanlai45_csdn 博主qq:2777137742 想要 深入学习 5GC IMS 等通信知识(加入 51学通信),或者想要 cpp 方向修改简历,模拟面试,学习指导都…...
docker 部署单节点的etcd以及 常用使用命令
docker部署etcd $ docker run -d --name etcd-server -p 2379:2379 -p 2380:2380 quay.io/coreos/etcd:v3.5.0 /usr/local/bin/etcd -name my-etcd-1 -advertise-client-urls http://0.0.0.0:2379 -listen-client-urls http://0.0.0.0:2379 -initial-advertise-peer-urls http…...
华为开放式耳机测评,南卡 、华为、Cleer开放式耳机超深度横评
近年来,开放式蓝牙耳机因其独特的设计和优势受到了越来越多消费者的青睐。其实对于开放式耳机,大家都没有一个明确的概念,可能会为了音质的一小点提升而耗费大量的资金,毕竟这是一个无底洞。 作为在过去一年体验过不下20款开放式耳…...
【Power Query】List.Select 筛选列表
List.Select 筛选列表 ——在列表中返回满足条件的元素 List.Select(列表,判断条件) 不是列表的可以转成列表再筛选,例如 Record.ToList 不同场景的判断条件参考写法 (1)单条件筛选 列表中小于50的数字 List.Select({1,99,8,98,5},each _<50) (2)多条件筛…...
Spring--4
SpringWeb 概念 是Spring框架的一个模块,基于Servlet的一个原始Web框架。 SpringWEB 运行流程 描述:前端用户请求发送的后端以后,先经过前端控制器DispatcherServlet(再次之前也可能有过滤器的存在),经过前端控制器解析后&…...
django celery 定时任务 Crontab 计划格式
Celery 定时任务教程 Celery 是一个强大的异步任务队列/作业队列基于分布式消息传递的开源项目。它广泛用于处理各种类型的后台任务,例如发送电子邮件、处理图像、数据分析和视频转换等。 本文将介绍如何使用 Celery 实现定时任务,包括: 安…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验
系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
恶补电源:1.电桥
一、元器件的选择 搜索并选择电桥,再multisim中选择FWB,就有各种型号的电桥: 电桥是用来干嘛的呢? 它是一个由四个二极管搭成的“桥梁”形状的电路,用来把交流电(AC)变成直流电(DC)。…...
goreplay
1.github地址 https://github.com/buger/goreplay 2.简单介绍 GoReplay 是一个开源的网络监控工具,可以记录用户的实时流量并将其用于镜像、负载测试、监控和详细分析。 3.出现背景 随着应用程序的增长,测试它所需的工作量也会呈指数级增长。GoRepl…...
【大模型】RankRAG:基于大模型的上下文排序与检索增强生成的统一框架
文章目录 A 论文出处B 背景B.1 背景介绍B.2 问题提出B.3 创新点 C 模型结构C.1 指令微调阶段C.2 排名与生成的总和指令微调阶段C.3 RankRAG推理:检索-重排-生成 D 实验设计E 个人总结 A 论文出处 论文题目:RankRAG:Unifying Context Ranking…...
