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 实现定时任务,包括: 安…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
接口自动化测试:HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具,支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议,涵盖接口测试、性能测试、数字体验监测等测试类型…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...
破解路内监管盲区:免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题,导致车牌识别率低、逃费率高,传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法,正成为破局关键。该设备安装于车位侧方0.5-0.7米高度,直接规避树枝遮…...
智能职业发展系统:AI驱动的职业规划平台技术解析
智能职业发展系统:AI驱动的职业规划平台技术解析 引言:数字时代的职业革命 在当今瞬息万变的就业市场中,传统的职业规划方法已无法满足个人和企业的需求。据统计,全球每年有超过2亿人面临职业转型困境,而企业也因此遭…...
多元隐函数 偏导公式
我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式,给定一个隐函数关系: F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 🧠 目标: 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z、 …...
rm视觉学习1-自瞄部分
首先先感谢中南大学的开源,提供了很全面的思路,减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接:https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架: 代码框架结构:readme有…...
Windows 下端口占用排查与释放全攻略
Windows 下端口占用排查与释放全攻略 在开发和运维过程中,经常会遇到端口被占用的问题(如 8080、3306 等常用端口)。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口,帮助你高效解决此类问题。 一、准…...
从零手写Java版本的LSM Tree (一):LSM Tree 概述
🔥 推荐一个高质量的Java LSM Tree开源项目! https://github.com/brianxiadong/java-lsm-tree java-lsm-tree 是一个从零实现的Log-Structured Merge Tree,专为高并发写入场景设计。 核心亮点: ⚡ 极致性能:写入速度超…...
