当前位置: 首页 > news >正文

[react优化] 避免组件或数据多次渲染/计算

代码如下 点击视图x➕1,导致视图更新, 视图更细导致a也重新大量计算!!这很浪费时间

function App() {const [x, setX] = useState(3)const y = x + 2console.log('重新渲染', x, y);console.time('timer')let a = 0for (let index = 0; index < 1000000000; index++) {a++}console.timeEnd('timer')return (<div className="App"><ul onClick={() => setX(x + 1)}><li>{x}</li><li>{y}</li><li>{a}</li></ul></div>)
}

每次更新都浪费时间去计算

有没有办法优化掉这个大量计算呢?


用useMemo()来优化

useMemo – React 中文文档

代码优化如下

function App() {const [x, setX] = useState(3)const y = x + 2console.log('重新渲染', x, y);console.time('timer')let a: number = useMemo(() => {let a = 0for (let index = 0; index < 1000000000; index++) {a++}return a}, [])console.timeEnd('timer')return (<div className="App"><ul onClick={() => setX(x + 1)}><li>{x}</li><li>{y}</li><li>{a}</li></ul></div>)
}

 


 如果a依赖x呢?其实是会变的,x变a就重新变化

  const [x, setX] = useState(3)const y = x + 2console.log('重新渲染', x, y);console.time('timer')let a: number = useMemo(() => {let a = 0for (let index = 0; index < 1000000000; index++) {a += x}return a}, [x])



 还有什么应用场景? 避免子组件重复渲染

有代码如下,每次状态改变,,父组件和子组件都要重新渲染

const Son = () => {console.log('子组件渲染');return <h1>子组件</h1>
}
function App() {const [x, setX] = useState(3)console.log('我是父组件');return (<div className="App"><h1 onClick={() => { setX(x + 1) }}>父组件</h1><Son /></div>)
}

怎么解决避免子组件重新渲染?用memo,memo 允许你的组件在 props 没有改变的情况下跳过重新渲染。

 memo – React 中文文档

这样子组件就不会变化了

但是如果传值呢?代码如下,传了一个数组

const Son = memo(function (props: { arr: number[] }) {console.log('子组件渲染');return <h1>子组件</h1>
})
function App() {const [x, setX] = useState(3)const arr = [1, 2, 3]console.log('我是父组件');return (<div className="App"><h1 onClick={() => { setX(x + 1) }}>父组件</h1><Son arr={arr} /></div>)
}

每次都重新渲染,因为数组是引用类型,每次父组件重新渲染都会导致arr的内存地址不一样

那怎么办?用useMemo,让他换缓存

 当然useState也可以

const [arr, setArr] = useState([1, 2, 3])

useRef也可以

 好了祝你生活愉快

用useMemo跳过昂贵的计算_哔哩哔哩_bilibili

相关文章:

[react优化] 避免组件或数据多次渲染/计算

代码如下 点击视图x➕1,导致视图更新, 视图更细导致a也重新大量计算!!这很浪费时间 function App() {const [x, setX] useState(3)const y x 2console.log(重新渲染, x, y);console.time(timer)let a 0for (let index 0; index < 1000000000; index) {a}console.timeE…...

「意」起出发 丨意大利OXO城市展厅盛大启幕,成都设计圈共襄盛举

4月8日&#xff0c;主题为“「意」起出发「智」见OXO”的意大利OXO城市展厅发布会在成都大悦城OXO成都城市展厅隆重举办。 大会现场&#xff0c;成都装饰协会领导&#xff0c;喜尔康董事长吴锡山&#xff0c;天合智能副董事长罗洁&#xff0c;意大利OXO卫浴市场部总监兰彬&…...

你不知道的JavaScript---深入理解 JavaScript 作用域

你好&#xff0c;我是小白Coding日志&#xff0c;一个热爱技术的程序员。在这里&#xff0c;我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客&#xff0c;一起在技术的世界里探索前行吧&#xff01; 1. 什么是作用域…...

FPGA(Verilog)实现按键消抖

实现按键消抖功能&#xff1a; 1.滤除按键按下时的噪声和松开时的噪声信号。 2.获取已消抖的按键按下的标志信号。 3.实现已消抖的按键的连续功能。 Verilog实现 模块端口 key_filter(input wire clk ,input wire rst_n ,input wire key_in , //按下按键时为0output …...

第十二届蓝桥杯大赛软件赛省赛C/C++大学B组

第十二届蓝桥杯大赛软件赛省赛C/C 大学 B 组 文章目录 第十二届蓝桥杯大赛软件赛省赛C/C 大学 B 组1、空间2、卡片3、直线4、货物摆放5、路径6、时间显示7、砝码称重8、杨辉三角形9、双向排序10、括号序列 1、空间 1MB 1024KB 1KB 1024byte 1byte8bit // cout<<"2…...

面了钉钉搜广增算法岗(暑期实习),秒挂。。。。

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 汇总…...

前端实现流文件下载的完整指南

在现代Web开发中&#xff0c;经常会遇到需要从服务器下载文件的情况。有时候这些文件是事先存储好的&#xff0c;可以通过简单的URL链接直接下载&#xff1b;但有时候&#xff0c;我们需要从数据流中动态生成文件并将其提供给用户。本篇博客将介绍如何在前端实现流文件下载的完…...

Kotlin:常用标准库函数(let、run、with、apply、also)

一、let 扩展函数 Kotlin标准库函数let可用于范围确定和空检查。当调用对象时&#xff0c;let执行给定的代码块并返回其最后一个表达式的结果。对象可以通过引用(默认情况下)或自定义名称在块中访问。 let扩展函数源码 let.kt文件代码 fun main() {println("isEmpty $is…...

雷军给年轻人的五点建议

前言 拿来激励自己,没事就看一看,给自己高一点的要求. 致刚入门的程序员五点建议 每个IT企业&#xff0c;尤其是初创企业&#xff0c;非常苦恼&#xff1a;找不到好的程序员。现在大学、软件学院及各种培训机构&#xff0c;每年培养几十万的程序员&#xff0c;毕业的每个人都…...

Unity DOTS物理引擎的核心分析与详解

最近DOTS发布了正式的版本,同时基于DOTS的理念实现了一套高性能的物理引擎&#xff0c;今天我们来给大家分享和介绍一下这个物理引擎的使用。 Unity.Physics的设计哲学 Unity.Physics是基于DOTS设计思想的一个高性能C#物理引擎的实现, 包含了物理刚体的迭代计算与碰撞检测等查…...

C++ //练习 12.4 在我们的check函数中,没有检查i是否大于0。为什么可以忽略这个检查?

C Primer&#xff08;第5版&#xff09; 练习 12.4 练习 12.4 在我们的check函数中&#xff0c;没有检查i是否大于0。为什么可以忽略这个检查&#xff1f; 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 解释 size_type类型是无符号整…...

达梦备份与恢复

达梦备份与恢复 基础环境 操作系统&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本&#xff1a;DM Database Server 64 V8 架构&#xff1a;单实例1 设置bak_path路径 --创建备份文件存放目录 su - dmdba mkdir -p /dm8/backup--修改dm.ini 文件…...

iOS App Store审核要求与Flutter应用的兼容性分析

本文探讨了使用Flutter开发的iOS应用能否上架&#xff0c;以及上架的具体流程。苹果提供了App Store作为正式上架渠道&#xff0c;同时也有TestFlight供开发者进行内测。合规并通过审核后&#xff0c;Flutter应用可以顺利上架。但上架过程可能存在一些挑战&#xff0c;因此可能…...

javaScript常见对象方法总结

1&#xff0c;object.assign() 用于合并对象的属性。它可以将一个或多个源对象的属性复制到目标对象中&#xff0c;实现属性的合并。 语法 Object.assign(target, ...sources); 1,target&#xff1a;目标对象&#xff0c;将属性复制到该对象中。 2,sources&#xff1a;一个…...

使用Java流API构建树形结构数据

简介&#xff1a; 在实际开发中&#xff0c;构建树状层次结构是常见需求&#xff0c;如组织架构、目录结构或菜单系统。本教案通过解析给定的Java代码&#xff0c;展示如何使用Java 8 Stream API将扁平化的菜单数据转换为具有层级关系的树形结构。 1. 核心类定义 - Menu Data…...

蓝桥杯备考

1.1 输入输出 cin/cout scanf/printf 万能头文件 #include<bits/stdc.h> cin/cout 速度相对慢&#xff0c;需要关同步,代码如下 #include<bits/stdc.h> using namespace std; int main(){ios::sync_with_stdio(0);cin.tie(0);cout.tie(0);int x,y;cin>>x…...

Linux云计算之Linux基础1——操作系统理论基础

目录 1、UNIX 的诞生和广泛使用 2、CPU 架构类型 3、CPU 指令 4、计算机程序设计和执行过程 5、操作统OS 6、编程层次 7、程序的内部运行接口 8、UI程序接口(人机交互接口) 9、程序的运行模式: 10、POSIX&#xff1a;可移植操作系统规范 11、计算机开源领域 12、Li…...

大模型从入门到应用——OpenAI基础调用

摘要&#xff1a;这是OpenAI的基本调用&#xff0c;通过文章了解大模型的一个基础使用 1. 调用说明 在大型语言模型&#xff08;LLM&#xff09;的应用中&#xff0c;OpenAI的基础调用是入门的关键一步。通过调用OpenAI的API&#xff0c;我们可以利用其强大的语言处理能力&am…...

前端学习<三>CSS进阶——0102-CSS布局样式

前言 css 进阶的主要内容如下。 1、css 非布局样式 html 元素的分类和特性 css 选择器 css 常见属性&#xff08;非布局样式&#xff09; 2、css 布局相关 css 布局属性和组合解析 常见布局方案 三栏布局案例 3、动画和效果 属于 css 中最出彩的内容。 多背景多投影特…...

关于51单片机TMOD定时器的安全配置

定时器介绍&#xff1a; -------------------------------------------------------------------------------------------------------------------------- 首先配置的是控制寄存器 TCON 说直白点&#xff0c;这个寄存器就是用来计数的&#xff0c;打开计时器&#xff0c;关…...

换掉 Notepad++,事实证明它更牛逼!

提到文本编辑工具&#xff0c;大家肯定第一时间想到的是 Notepad 。Notepad 是一种流行的源代码编辑器&#xff0c;也是 Windows 用户的可靠记事本替代品。它是一个功能强大的实用程序&#xff0c;可在不占用大量存储空间的情况下提供最佳性能。不幸的是&#xff0c;它不适用于…...

MaxKB社区版限制解除后,别忘了检查这3个地方!v1.10.2-lts实战经验分享

MaxKB社区版限制解除后的深度验证指南&#xff1a;v1.10.2-lts实战经验 当你按照教程完成MaxKB社区版的限制解除操作后&#xff0c;真正的挑战才刚刚开始。很多技术人员在修改代码并重启服务后&#xff0c;往往以为大功告成&#xff0c;却忽略了后续的关键验证步骤。本文将带你…...

避开生产计划大坑:不懂MPS和MRP的区别,你的SAP PP模块白学了

避开生产计划大坑&#xff1a;不懂MPS和MRP的区别&#xff0c;你的SAP PP模块白学了 在制造业数字化转型的浪潮中&#xff0c;SAP PP模块作为生产计划的核心枢纽&#xff0c;常常成为企业运营的"隐形战场"。许多实施顾问和计划专员在MD41和MD02这两个相似的事务码前陷…...

如何轻松实现单机游戏分屏多人:Nucleus Co-Op完整指南

如何轻松实现单机游戏分屏多人&#xff1a;Nucleus Co-Op完整指南 【免费下载链接】nucleuscoop Starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirrors/nu/nucleuscoop 还在为找不到联机伙伴而烦恼吗&a…...

智能视频PPT提取:从动态内容到静态文档的高效转化方案

智能视频PPT提取&#xff1a;从动态内容到静态文档的高效转化方案 【免费下载链接】extract-video-ppt extract the ppt in the video 项目地址: https://gitcode.com/gh_mirrors/ex/extract-video-ppt 场景痛点&#xff1a;视频内容提取的三大核心挑战 如何从90分钟的…...

李慕婉-仙逆-造相Z-Turbo AI核心原理科普:如何用Transformer理解并生成人类语言

李慕婉-仙逆-造相Z-Turbo AI核心原理科普&#xff1a;如何用Transformer理解并生成人类语言 你有没有想过&#xff0c;当你和“李慕婉-仙逆-造相Z-Turbo”这样的AI模型对话时&#xff0c;它到底是怎么“听懂”你的话&#xff0c;又“想”出那些回答的&#xff1f;它不像我们人…...

伯克利Octo机器人框架实战:5步搞定跨平台任务迁移(附代码)

伯克利Octo机器人框架实战&#xff1a;5步搞定跨平台任务迁移&#xff08;附代码&#xff09; 在机器人开发领域&#xff0c;硬件平台的多样性一直是阻碍算法快速部署的主要瓶颈。想象一下&#xff0c;你花费数月为WidowX机械臂开发的抓取算法&#xff0c;当实验室新购入UR5工业…...

像素剧本圣殿部署指南:Qwen2.5-14B-Instruct在生产环境中稳定运行的GPU显存优化技巧

像素剧本圣殿部署指南&#xff1a;Qwen2.5-14B-Instruct在生产环境中稳定运行的GPU显存优化技巧 1. 项目概述 像素剧本圣殿&#xff08;Pixel Script Temple&#xff09;是一款基于Qwen2.5-14B-Instruct大模型深度微调的专业剧本创作工具。它将先进的AI推理能力与独特的8-Bit…...

别再只数步数了!深入聊聊ADXL345计步算法里的‘动态阈值’与‘最活跃轴’

别再只数步数了&#xff01;深入聊聊ADXL345计步算法里的‘动态阈值’与‘最活跃轴’ 当你盯着智能手环上的步数统计时&#xff0c;有没有想过这串数字背后藏着怎样的算法智慧&#xff1f;ADXL345作为一款经典的三轴加速度传感器&#xff0c;其计步算法远非简单的阈值比较那么简…...

物理引擎核心原理拆解:GJK算法如何用Support函数取代SAT检测

物理引擎核心原理拆解&#xff1a;GJK算法如何用Support函数取代SAT检测 在实时物理模拟的世界里&#xff0c;碰撞检测算法的效率直接决定了虚拟世界的真实感与流畅度。当两个刚体在三维空间中高速运动时&#xff0c;传统分离轴定理&#xff08;SAT&#xff09;需要检测多达15组…...