当前位置: 首页 > 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]);
http://www.lryc.cn/news/173750.html

相关文章:

  • 基于微信小程序的美食推荐系统设计与实现(源码+lw+部署文档+讲解等)
  • laravel框架 - 消息队列如何使用
  • Dependency ‘org.redisson:redisson:‘ not found解决方法 三种刷新Maven项目的方法
  • Mysql高级——索引优化和查询优化(1)
  • Oracle for Windows安装和配置——Oracle for Windows数据库创建及测试
  • 【1993. 树上的操作】
  • LeetCode【1. 两数之和】
  • 3D成像技术概述
  • Centos7 安装部署 Kubernetes(k8s) 高可用集群
  • c++加速方法大全
  • 【国科大卜算】Truck History 最小生成树Prim
  • SQLAlchemy映射表结构和对数据的CRUD
  • Spring boot原理
  • 技术贴 | 深度解析 PostgreSQL Protocol v3.0(二)— 扩展查询
  • HDFS编程实践-从HDFS中下载指定文件到本地
  • 安防监控视频AI智能分析网关:人流量统计算法的应用场景汇总
  • 第一百五十二回 自定义组件综合实例:游戏摇杆三
  • 多线程的学习中篇上
  • 非标准化套利
  • 从CNN(卷积神经网络),又名CAM获取热图
  • kafka消费者多线程开发
  • 布局设计和实现:计算器UI【TableLayout、GridLayout】
  • stack与queue的简单封装
  • ChatGPT使用技巧整理
  • 机器学习笔记 - 维度诅咒的数学表达
  • 组合计数训练题解
  • P1095 [NOIP2007 普及组] 守望者的逃离
  • Python函数绘图与高等代数互融实例(八):箱线图|误差棒图|堆积图
  • 联想y7000 y7000p 2018/2019 不插电源 不插充电器, 直接关机 ,电量一直89%/87%/86%,V0005如何解决?
  • stm32与esp8266通信