【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]);

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

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

相关文章

OpenAI 模型列表模型

〖ChatGPT实践指南 - 零基础扫盲篇⑧〗- OpenAI 的 模型(Model) 介绍 最新模型描述最大 TOKENS训练日期 gpt-4比任何 GPT-3.5 模型都更强大,能够执行更复杂的任务, 并针对聊天进行了优化。将使用我们最新的模型迭代进行更新。 8,192 tokens Up to Sep 20…

[git] 撤销已经push的提交

1.首先先撤销在本地的commit&#xff1a; git reset --soft HEAD~1这段的意思是撤销最近的一次commit&#xff0c;并且保留工作区的修改。 2.撤销了commit之后&#xff0c;使用git push提交变更到远程 git push origin <本地分支名>:<远程分支名> -f注意&#…

【Linux】shell 提示符

​ Shell俗称壳程序&#xff0c;是一种由C语言编写的用于和操作系统交互的命令解析器软件。它用来接收用户输入命令&#xff0c;然后调用相应的应用程序。 Shell同时又是一种程序设计语言。作为命令语言&#xff0c;它交互式解释和执行用户输入的命令或者自动地解释和执行预先…

PyG-GAT-Cora(在Cora数据集上应用GAT做节点分类)

文章目录 model.pymain.py参数设置运行图 model.py import torch.nn as nn from torch_geometric.nn import GATConv import torch.nn.functional as F class gat_cls(nn.Module):def __init__(self,in_dim,hid_dim,out_dim,dropout_size0.5):super(gat_cls,self).__init__()s…

java学习--day6(数组)

文章目录 day5作业今天的内容1.数组1.1开发中为啥要有数组1.2在Java中如何定义数组1.3对第二种声明方式进行赋值1.4对数组进行取值1.5二维数组【了解】1.6数组可以当成一个方法的参数【重点】1.7数组可以当成一个方法的返回值1.8数组在内存中如何分配的【了解】 2.数组方法循环…

PFEA111–20 PFEA111–20 人工智能如何颠覆石油和天然气行业

PFEA111–20 PFEA111–20 人工智能如何颠覆石油和天然气行业 人工智能(AI)和机器学习(ML)等新技术的到来正在改变几十年来行业的运营方式。这些技术正在带来革命性的变革&#xff0c;影响着整个行业。石油和天然气行业在其运营过程中面临着许多挑战&#xff0c;如未连接的环境…

在SpringBoot项目中整合SpringSession,基于Redis实现对Session的管理和事件监听

1、SpringSession简介 SpringSession是基于Spring框架的Session管理解决方案。它基于标准的Servlet容器API&#xff0c;提供了Session的分布式管理解决方案&#xff0c;支持把Session存储在多种场景下&#xff0c;比如内存、MongoDB、Redis等&#xff0c;并且能够快速集成到Spr…

AI 标注终结人工标注,效率高 100 倍,成本为 14%

AI 标注终结人工标注,效率高 100 倍,成本为 14% 稀缺性如何解决数据标注廉价的新方法数据标注自动化AnthropicAutolabel 安装 (Python)AI 标注终结人工标注,效率高 100 倍,成本为 14% 稀缺性 大模型满天飞的时代,AI行业最缺的是什么 算力(显卡)高质量的数据OpenAI 正…

Java21 LTS版本

一、前言 除了众所周知的 JEP 之外&#xff0c;Java 21 还有更多内容。首先请确认 java 版本&#xff1a; $ java -version openjdk version "21" 2023-09-19 OpenJDK Runtime Environment (build 2135-2513) OpenJDK 64-Bit Server VM (build 2135-2513, mixed mo…

activiti7的数据表和字段的解释

activiti7的数据表和字段的解释 activiti7版本有25张表&#xff0c;而activiti6有28张表&#xff0c;activiti5有27张表&#xff0c;绝大部分的表和字段的含义都是一样的&#xff0c;所以本次整理的activiti7数据表和字段的解释&#xff0c;也同样适用于activiti6和5。 1、总览…

pcl--第五节 点云表面法线估算

估算点云表面法线 * 表面法线是几何表面的重要属性&#xff0c;在许多领域&#xff08;例如计算机图形应用程序&#xff09;中大量使用&#xff0c;以应用正确的光源以产生阴影和其他视觉效果。 给定一个几何表面&#xff0c;通常很难将表面某个点的法线方向推断为垂直于该点…

python execute() 使用%s 拼接sql 避免sql注入攻击 好于.format

1 execute(参数一:sql 语句) # 锁定当前查询结果行 cursor.execute("SELECT high, low, vol FROM table_name WHERE symbol %s FOR UPDATE;"% (symbol,)) 2 .format() cursor.execute("SELECT high, low, vol FROM table_name WHERE symbol {} FOR UPDATE;…

Pytorch实现LSTM预测模型并使用C++相应的ONNX模型推理

Pytorch实现RNN模型 代码 import torch import torch.nn as nnclass LSTM(nn.Module):def __init__(self, input_size, output_size, out_channels, num_layers, device):super(LSTM, self).__init__()self.device deviceself.input_size input_sizeself.hidden_size inpu…

CockroachDB集群部署

CockroachDB集群部署 1、CockroachDB简介 CockroachDB(有时简称为CRDB)是一个免费的、开源的分布式 SQL 数据库&#xff0c;它建立在一个事务性和强一致性的键 值存储之上。它由 PebbleDB(一个受 RocksDB/leveldb 启发的 K/B 存储库)支持&#xff0c;并使用 Raft 分布式共识…

TypeScript入门

目录 一&#xff1a;语言特性 二&#xff1a;TypeScript安装 NPM 安装 TypeScript 三&#xff1a;TypeScript基础语法 第一个 TypeScript 程序 四&#xff1a;TypeScript 保留关键字 空白和换行 TypeScript 区分大小写 TypeScript 注释 TypeScript 支持两种类型的注释 …

初识C语言——详细入门一(系统性学习day4)

目录 前言 一、C语言简单介绍、特点、基本构成 简单介绍&#xff1a; 特点&#xff1a; 基本构成&#xff1a; 二、认识C语言程序 标准格式&#xff1a; 简单C程序&#xff1a; 三、基本构成分类详细介绍 &#xff08;1&#xff09;关键字 &#xff08;2&#xf…

fork函数

二.fork函数 2.1函数原型 fork()函数在 C 语言中的原型如下&#xff1a; #include <unistd.h>pid_t fork(void);其中pid_t是一个整型数据类型&#xff0c;用于表示进程ID。fork()函数返回值是一个pid_t类型的值&#xff0c;具体含义如下&#xff1a; 如果调用fork()的…

MyBatis中当实体类中的属性名和表中的字段名不一样,怎么办

方法1&#xff1a; 在mybatis核心配置文件中指定&#xff0c;springboot加载mybatis核心配置文件 springboot项目的一个特点就是0配置&#xff0c;本来就省掉了mybatis的核心配置文件&#xff0c;现在又加回去算什么事&#xff0c;总之这种方式可行但没人这样用 具体操作&…

MFC C++ 数据结构及相互转化 CString char * char[] byte PCSTR DWORE unsigned

CString&#xff1a; char * char [] BYTE BYTE [] unsigned char DWORD CHAR&#xff1a;单字节字符8bit WCHAR为Unicode字符:typedef unsigned short wchar_t TCHAR : 如果当前编译方式为ANSI(默认)方式&#xff0c;TCHAR等价于CHAR&#xff0c;如果为Unicode方式&#xff0c…

Python灰帽编程——错误异常处理与面向对象

文章目录 错误异常处理与面向对象1. 错误和异常1.1 基本概念1.1.1 Python 异常 1.2 检测&#xff08;捕获&#xff09;异常1.2.1 try except 语句1.2.2 捕获多种异常1.2.3 捕获所有异常 1.3 处理异常1.4 特殊场景1.4.1 with 语句 1.5 脚本完善 2. 内网主机存活检测程序2.1 scap…