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

【react】慎用useLayoutEffect转而使用useEffect

由于useLayoutEffect钩子是在dom获得后、渲染组件前。因此,如果在useLayoutEffect中设置一些长耗时的,或者死循环之类的任务,会导致内存堆栈溢出。这时候需要转用useEffect

// 适配全局宽度拉动变化时,legend显示数量React.useEffect(() => {const onResize = debounce(() => {let totalWidth = 0;const els = itemWrapRef.current;const spaceEl = spaceWrapRef.current;const { length } = options;let maxNum: number = length;let _noFullOpts = [...options];let isShow = false;els.forEach((el: any, index: number) => {// 累计宽度是否大于容器宽度,为了计算最大容个数if (el?.offsetWidth && spaceEl?.clientWidth) {const flag = totalWidth + el?.offsetWidth > spaceEl?.clientWidth;// console.log('width===>', spaceEl.clientWidth, totalWidth, flag);if (!flag) {maxNum = index + 1;totalWidth += el?.offsetWidth;isShow = false;} else {isShow = true;}if (length > 1) {_noFullOpts = options.slice(0, maxNum);}}});setIsShowMore(isShow);setNoFullOpts([..._noFullOpts]);}, 50);onResize();window.addEventListener('resize', onResize);return () => {window.removeEventListener('resize', onResize);};}, [options]);

相关文章:

【react】慎用useLayoutEffect转而使用useEffect

由于useLayoutEffect钩子是在dom获得后、渲染组件前。因此,如果在useLayoutEffect中设置一些长耗时的,或者死循环之类的任务,会导致内存堆栈溢出。这时候需要转用useEffect。 // 适配全局宽度拉动变化时,legend显示数量React.use…...

基于微信小程序的美食推荐系统设计与实现(源码+lw+部署文档+讲解等)

前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗 👇🏻…...

laravel框架 - 消息队列如何使用

业务场景:项目里边有很多视频资源需要上传到抖音资源库,通过队列一条一条上传。 参考实例:发送邮件,仅供参考 (1)创建任务【生成任务类】 在你的应用程序中,队列的任务类都默认放在 app/Jobs 目录下。如果这个目录不存…...

Dependency ‘org.redisson:redisson:‘ not found解决方法 三种刷新Maven项目的方法

报错情况 在pom中导入redisson包 <dependency><groupId>org.redisson</groupId><artifactId>redisson</artifactId> </dependency> 爆红&#xff0c;还显示Dependency org.redisson:redisson: not found。 由于报错已经解决&#xff0c;…...

Mysql高级——索引优化和查询优化(1)

索引优化 1. 数据准备 学员表插50万条&#xff0c; 班级表插1万条。 建表 CREATE TABLE class (id INT ( 11 ) NOT NULL AUTO_INCREMENT,className VARCHAR ( 30 ) DEFAULT NULL,address VARCHAR ( 40 ) DEFAULT NULL,monitor INT NULL,PRIMARY KEY ( id ) ) ENGINE INNO…...

Oracle for Windows安装和配置——Oracle for Windows数据库创建及测试

2.2. Oracle for Windows数据库创建及测试 2.2.1. 创建数据库 1&#xff09;启动数据库创建助手&#xff08;DBCA&#xff09; 进入%ORACLE_HOME%\bin\目录并找到“dbca”批处理程序&#xff0c;双击该程序。具体如图2.1.3-1所示。 图2.1.3-1 双击“%ORACLE_HOME%\bin\dbca”…...

【1993. 树上的操作】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你一棵 n 个节点的树&#xff0c;编号从 0 到 n - 1 &#xff0c;以父节点数组 parent 的形式给出&#xff0c;其中 parent[i] 是第 i 个节点的父节点。树的根节点为 0 号节点&#xff0c;所以 par…...

LeetCode【1. 两数之和】

穷通有命无须卜&#xff0c;富贵何时乃济贫&#xff1b;角逐名场今已久&#xff0c;依然一幅旧儒巾。 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输…...

3D成像技术概述

工业4.0时代,三维机器视觉备受关注,目前,三维机器视觉成像方法主要分为光学成像法和非光学成像法,这之中,光学成像法是市场主流。 飞行时间3D成像 飞行时间成像(Time of Flight),简称TOF,是通过给目标连续发送光脉冲,然后用传感器接收从物体返回的光,通过探测光脉…...

Centos7 安装部署 Kubernetes(k8s) 高可用集群

1&#xff1a;基础环境准备 宿主机系统集群角色服务器IP主机名称容器centos7.6master192.168.2.150ks-m1dockercentos7.6master192.168.2.151ks-n1dockercentos7.6master192.168.2.152ks-n2docker 1.1 服务器初始化及网络配置 VMware安装Centos7并初始化网络使外部可以访问*…...

c++加速方法大全

我们平常写代码的时候&#xff0c;经常超时&#xff0c;非常难受&#xff0c;所以&#xff0c;我写了这篇文章&#xff0c;让你的代码提升速度&#xff08;这些方法作者亲测有效&#xff0c;用了这些方法&#xff0c;足足提升了1秒&#xff01;虽然最后题目还是没过&#xff09…...

【国科大卜算】Truck History 最小生成树Prim

Truck History 文章目录 Truck Historyproblem descriptionInputOutputSample个人理解 problem description Advanced Cargo Movement, Ltd. uses trucks of different types. Some trucks are used for vegetable delivery, other for furniture, or for bricks. The company…...

SQLAlchemy映射表结构和对数据的CRUD

目录 ORM模型映射到数据库中 SQLAlchemy对数据的增删改查操作​编辑 构建session对象 添加对象 查找对象 修改对象 删除对象 ORM模型映射到数据库中 用declarative_base根据engine创建一个ORM基类 from sqlalchemy.ext.declarative import declarative_base engine cr…...

Spring boot原理

起步依赖 Maven的传递依赖 自动配置 Springboot的自动配置就是当spring容器启动后&#xff0c;一些配置类、bean对象就自动存入到IOC容器中&#xff0c;不需要我们手动去声明&#xff0c;从而简化了开发&#xff0c;省去了繁琐的配置操作。 自动配置原理&#xff1a; 方案一…...

技术贴 | 深度解析 PostgreSQL Protocol v3.0(二)— 扩展查询

引言 PostgreSQL 使用基于消息的协议在前端&#xff08;客户端&#xff09;和后端&#xff08;服务器&#xff09;之间进行通信。该协议通过 TCP/IP 和 Unix 域套接字支持。 《深度解析 PostgreSQL Protocol v3.0》系列技术贴&#xff0c;将带大家深度了解 PostgreSQL Protoc…...

HDFS编程实践-从HDFS中下载指定文件到本地

前言&#xff1a;Hadoop采用java语言开发&#xff0c;提供了Java Api与HDFS进行交互 先要把hadoop的jar包导入到idea中去 为了能编写一个与hdfs交互的java应用程序&#xff0c;一般需要向java工程中添加以下jar包 1&#xff09;/usr/local/hadoop/share/hadoop/common目录下…...

安防监控视频AI智能分析网关:人流量统计算法的应用场景汇总

TSINGSEE青犀人流量检测算法是内置在智能分析网关中的一种能够通过AI分析和计算人群数量以及密度的算法技术&#xff0c;在提升城市管理效率、改善用户体验和增加安全性方面发挥着重要作用。人流量检测算法在许多领域都有广泛的应用&#xff0c;如智慧城市、智慧交通、智慧景区…...

第一百五十二回 自定义组件综合实例:游戏摇杆三

文章目录 内容回顾优化性能示例代码我们在上一章回中介绍了 如何实现游戏摇杆相关的内容,本章回中将继续介绍这方面的知识.闲话休提,让我们一起Talk Flutter吧。 内容回顾 我们在前面章回中介绍了游戏摇杆的概念以及实现方法,并且通过示例代码演示了实现游戏摇杆的整个过程…...

多线程的学习中篇上

终其一生&#xff0c;满是遗憾 知足且坚定&#xff0c;温柔且上进 总之岁月漫长&#xff0c;然而值得等待 获取当前线程引用 方法说明public static Thread currentThread();返回当前线程对象的引用 currentThread() > 在那个线程中, 就能获取到那个线程的实例. static关键…...

非标准化套利

交易对象&#xff1a;目前使用非标准化组合进行交易。&#xff08;即黄金远近月&#xff0c;焦煤焦炭等等&#xff09; 交易平台&#xff1a;易盛极星极星产品网 手续费研究:白糖期货手续费和保证金2023年09月更新 - 九期网 本人使用的期货交易公司&#xff1a;中信期货&…...

【开发工具】Trae IDE 解决 Windows 下 C 工程无法跳转定义问题

1. 概要 &#x1f44b; 作为 Trae IDE 使用者&#xff0c;在 Windows 环境打开本地 C 工程时&#xff0c;习惯用 Ctrl 鼠标左键 快速跳转函数 / 变量定义却失效&#xff0c;仅能做文本匹配&#xff0c;无法精准定位语义定义。核心原因是 Trae 依赖 LSP&#xff08;语言服务器协…...

ESP32上给LVGL做个‘懒加载’:分页与动态读取大文本的实战对比(附代码)

ESP32上LVGL大文本显示优化&#xff1a;分页加载与动态读取的深度对比与实践 在嵌入式设备上处理大文本显示一直是开发者面临的挑战之一。当我们在ESP32这样的资源受限平台上使用LVGL&#xff08;Light and Versatile Graphics Library&#xff09;显示超长文本时&#xff0c;如…...

告别卡顿!用UniApp的RenderJS为你的APP手势和动画性能提速(实战解析)

告别卡顿&#xff01;用UniApp的RenderJS为你的APP手势和动画性能提速&#xff08;实战解析&#xff09; 在移动应用开发中&#xff0c;流畅的用户体验往往决定了产品的成败。当你在UniApp框架下开发APP时&#xff0c;是否遇到过这样的场景&#xff1a;地图拖拽时出现明显延迟&…...

如何快速上手uesave-rs:虚幻引擎存档编辑的终极指南

如何快速上手uesave-rs&#xff1a;虚幻引擎存档编辑的终极指南 【免费下载链接】uesave 项目地址: https://gitcode.com/gh_mirrors/ue/uesave 还在为无法修改心爱游戏的存档而烦恼吗&#xff1f;想要自定义游戏体验却不知从何下手&#xff1f;uesave-rs这款强大的Rus…...

Docker Compose 多服务编排实战:从零搭建微服务架构

Docker Compose 多服务编排实战&#xff1a;从零搭建微服务架构 目录 为什么需要 Docker Compose&#xff1f;实战项目架构环境准备核心服务搭建高级特性&#xff1a;负载均衡与服务发现日志集中管理&#xff08;EFK 栈&#xff09;生产环境最佳实践常见问题排查 为什么需要 …...

Revit插件开发效率革命:热重载技术如何彻底改变你的开发流程

Revit插件开发效率革命&#xff1a;热重载技术如何彻底改变你的开发流程 【免费下载链接】RevitAddInManager Revit AddinManager update .NET assemblies without restart Revit for developer. 项目地址: https://gitcode.com/gh_mirrors/re/RevitAddInManager RevitA…...

FPGA实战:3级CIC滤波器Verilog实现与仿真(附完整代码)

FPGA实战&#xff1a;3级CIC滤波器Verilog实现与仿真全解析 在数字信号处理领域&#xff0c;CIC&#xff08;Cascaded Integrator-Comb&#xff09;滤波器因其结构简单、运算高效的特点&#xff0c;成为多速率系统中的关键组件。本文将深入探讨3级CIC滤波器的Verilog实现细节&a…...

brpc并发编程模型性能对比:基准测试结果

brpc并发编程模型性能对比&#xff1a;基准测试结果 【免费下载链接】brpc brpc is an Industrial-grade RPC framework using C Language, which is often used in high performance system such as Search, Storage, Machine learning, Advertisement, Recommendation etc. &…...

如何快速恢复丢失的Ren‘Py游戏源码:Unrpyc终极反编译指南

如何快速恢复丢失的RenPy游戏源码&#xff1a;Unrpyc终极反编译指南 【免费下载链接】unrpyc A renpy script decompiler 项目地址: https://gitcode.com/gh_mirrors/un/unrpyc 你是否曾经遇到过精心制作的RenPy游戏源代码意外丢失&#xff0c;只剩下编译后的.rpyc文件&…...

实战指南:基于快马平台快速开发树莓派远程视频监控系统

最近在折腾树莓派&#xff0c;想做个简单的远程监控系统。之前总卡在环境配置和代码调试上&#xff0c;后来发现用InsCode(快马)平台可以快速生成可运行的项目骨架&#xff0c;省去了不少麻烦。这里分享下我的实现过程&#xff1a; 硬件准备 树莓派4B搭配官方摄像头模块是最基础…...