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;

计算大的方法缓存

子组件会因为propsstate的变化而重新渲染,这其中如果有很大计算量的方法的话,就会严重拖慢页面加载速度。像下面这种就是因为一个无关的更新,导致计算一会在执行,计算量大的话性能损耗很大
请添加图片描述

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 发生变化,否则不要重新执行传入的函数,这样我们我们的计算就不会在无关的状态变化时执行了,极大的提升了性能。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AlDente Pro for Mac电脑 充电限制保护工具 安装教程【简单,轻松上手】

Mac分享吧 文章目录 AlDente Pro for Mac 充电限制保护工具 安装完成&#xff0c;软件打开效果一、AlDente Pro for Mac 充电限制保护工具 Mac电脑版——v1.28.41️⃣&#xff1a;下载软件2️⃣&#xff1a;安装软件&#xff0c;将安装包从左侧拖入右侧文件夹中&#xff0c;等…

c++初阶--string类(使用)

大家好&#xff0c;许久不见&#xff0c;今天我们来学习c中的string类&#xff0c;在这一部分&#xff0c;我们首先应该学习一下string类的用法&#xff0c;然后再试着自己去实现一下string类。 在这里&#xff0c;我使用的是这个网站来查找的string类&#xff0c;这里面的内容…

Web,RESTful API 在微服务中的作用是什么?

大家好&#xff0c;我是锋哥。今天分享关于【Web&#xff0c;RESTful API 在微服务中的作用是什么&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; Web&#xff0c;RESTful API 在微服务中的作用是什么&#xff1f; 在微服务架构中&#xff0c;Web 和 RESTful …

react18中如何实现同步的setState来实现所见即所得的效果

在react项目中&#xff0c;实现添加列表项&#xff0c;最后一项自动显示在可视区域范围&#xff01;&#xff01; 实现效果 代码实现 import { useState, useRef } from "react"; import { flushSync } from "react-dom"; function FlushSyncRef() {con…

基于SSM网络在线考试系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;在线考试管理&#xff0c;试题管理&#xff0c;考试管理&#xff0c;系统管理 前台账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;在线考试&#xff0c;公告信…

word删除空白页 | 亲测有效

想要删掉word里面的末尾空白页&#xff0c;但是按了delete之后也没有用 找了很久找到了以下亲测有效的方法 1. 通过鼠标右键在要删除的空白页面处显示段落标记 2. 在字号输入01&#xff0c;按ENTER&#xff08;回车键&#xff09; 3.成功删除了&#xff01;&#xff01;

ECharts饼图-饼图34,附视频讲解与代码下载

引言&#xff1a; 在数据可视化的世界里&#xff0c;ECharts凭借其丰富的图表类型和强大的配置能力&#xff0c;成为了众多开发者的首选。今天&#xff0c;我将带大家一起实现一个饼图图表&#xff0c;通过该图表我们可以直观地展示和分析数据。此外&#xff0c;我还将提供详…

模型实战(27)之 YOLO11 推理、验证及训练自己的数据集

模型实战(27)之 YOLO11推理、验证及训练自己的数据集 2024年10.17,YOLO11是近期十月份刚经ultralytics团队更新优化发布的视觉算法深度学习网络模型,其网络模型结构代码实现也采用了比较新的Python数据结构,所以虚拟环境搭建安装包也比较新,经过多次踩坑,把关键环节记录…

电子便签:从偶像剧到职场的实用转变

在快节奏的现代生活中&#xff0c;便签已经成为了我们不可或缺的助手&#xff0c;无论是纸质的还是电子的&#xff0c;它们都以小巧的“身躯”承载着我们的日常记忆和待办事项。从偶像剧中常见的“便利贴”女孩形象&#xff0c;到如今电子便签的普及&#xff0c;它们帮助我们捕…

百度搜索竞价推广有必要做吗?怎么做效果好!

百度竞价推广&#xff0c;有的行业适合&#xff0c;有的行业则不行&#xff0c;下面我给大家分享下哪些行业可以。 如果是招商加盟、招代理商、招经销商&#xff0c;或者是高客单价咨询服务费&#xff0c;甚至是找合作方、渠道方的企业主都可以投放竞价推广。 总之一句话&…

网络安全的五大误区,你中招了吗?

在数字化时代&#xff0c;网络安全问题日益突出&#xff0c;许多人在使用网络过程中存在一些误区&#xff0c;导致个人信息泄露、财产损失等问题。本文将为您揭示网络安全的五大误区&#xff0c;帮助您提高安全防范意识。 误区一&#xff1a;使用复杂密码就一定安全 许多人认为…

基于SpringBoot+Vue+uniapp微信小程序的垃圾分类系统的详细设计和实现(源码+lw+部署文档+讲解等)

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…

万户ezEIP企业管理系统 productlist.aspx SQL注入漏洞复现

0x01 产品简介 万户ezEIP是一种企业资源规划软件,旨在帮助企业管理其各个方面的业务流程。它提供了一套集成的解决方案,涵盖了财务、供应链管理、销售和市场营销、人力资源等各个领域。 0x02 漏洞概述 万户ezEIP企业管理系统 productlist.aspx 接口存在SQL注入漏洞,未经身…

11_原始值的响应式方案-ref

目录 引入 ref解决响应丢失的问题自动脱 ref 引入 ref 在之前实现的 reactive 方法&#xff0c;其代理的目标必须是一个非原始值才行&#xff0c;例如&#xff1a; let str vue // 无法拦截 str 的修改 str vue3上述这个例子表达的意思就是&#xff0c;我们还缺少一个能够对…

ZYNQ:流水灯实验

实验目的 PL_LED0 和 PL_LED1 连接到 ZYNQ 的 PL 端&#xff0c;PL_LED0 和 PL_LED1循环往复产生流水灯的效果&#xff0c;流水间隔时间为 0.5s。 原理图 程序设计 本次实验是需要实现两个LED的循环熄灭点亮&#xff0c;时间间隔是0.5S,对时间间隔的控制使用计数器来完成。本…

第十九课:Python学习之继承

继承 目标 单继承多继承 面向对象三大特性 封装 根据 职责 将 属性 和 方法 封装 到一个抽象的 类 中继承 实现代码的重用&#xff0c;相同的代码不需要重复的编写多态 不同的对象调用相同的方法&#xff0c;产生不同的执行结果&#xff0c;增加代码的灵活度 01. 单继承 …

安装buildkit,并使用buildkit构建containerd镜像

背景 因为K8s抛弃Docker了,所以就只装了个containerd,这样就需要一个单独的镜像构建工具了,就用了buildkit,这也是Docker公司扶持的,他们公司的人出来搞的开源工具,官网在 https://github.com/moby/buildkit 简介 服务端为buildkitd,负责和runc或containerd后端连接干活,目前…

MySQL 查询按照更新时间排序遇到相同更新时间的会少数据

MySQL分页后出现重复数据或丢失记录的原因可能包括&#xff1a;SQL查询条件不一致、使用了不稳定的排序、LIMIT语句与ORDER BY配合问题、缓存设置不当或数据库复制配置错误。需要检查查询逻辑和系统配置以解决这些问题。 MySQL分页导致数据重复的原因&#xff1a; 1、排序算法…

如何有效维护您的WordPress在线商店内容:提高客户参与度与转化率的实用技巧

在电子商务领域&#xff0c;内容为王。新鲜、相关且有吸引力的内容能显著提升客户参与度和转化率。本文将探讨如何有效更新和维护您的在线商店内容&#xff0c;确保客户始终获得最佳体验。 定期更新产品信息 产品描述 产品描述是吸引客户和促成销售的关键。定期检查并更新产…

Netty基础原理

1.Netty概述 Netty是由JBoss提供的开源的高性能、异步事件驱动的网络应用框架&#xff0c;通过Netty可以很快的构建出通信效率极高的应用&#xff1b; 异步与同步是相对的&#xff0c;在请求或执行过程中&#xff0c;如果会阻塞等待就是同步&#xff0c;反之就是异步 1.1 Net…