【React 】useLayoutEffect 和 useEffect的区别

useLayoutEffectuseEffect是React中常用的两个Hook,它们的主要区别在于触发时机。

  1. useEffect会在渲染完成后异步执行,不会阻塞浏览器的绘制操作。它适用于需要在组件渲染后执行副作用的情况,例如数据的获取、订阅事件等。它不会阻止屏幕更新,因此可能会导致渲染的一次跳跃,用户可能会在页面渲染完成后才看到最终效果。

  2. useLayoutEffect的触发时机稍早于useEffect,在浏览器执行绘制之前同步执行。它适用于需要在DOM更新之后同步执行副作用的情况,例如获取DOM元素的尺寸、位置等。由于它会在页面渲染之前执行,因此可以阻止屏幕更新,确保副作用的执行不会引起渲染跳跃,提供更流畅的用户体验。

需要注意的是,由于useLayoutEffect会在DOM操作之后同步执行,如果执行的操作非常耗时,则可能导致页面响应变慢。在大多数情况下,使用useEffect即可满足需求,只有在确实需要在DOM更新后立即执行副作用时才考虑使用useLayoutEffect

应用useLayoutEffect的场景,比如:

React.useLayoutEffect(() => {// 环形图自适应宽度设置const resizePieWidth = () => {const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;if (+width >= 992) {setPieWidth(165);} else if (+width > 1150) {setPieWidth(205);} else if (+width > 1250) {setPieWidth(235);} else if (+width > 1350 || +width < 992) {setPieWidth(260);}};// 初始时需要触发resize,否则会有样式兼容问题resizePieWidth();const onResize = debounce(() => {resizePieWidth();}, 50);window.addEventListener('resize', onResize);return () => {window.removeEventListener('resize', onResize);};});

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

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

相关文章

redis zset score 求和

redis zset score 求和 local sum0 local zredis.call(‘ZRANGE’, KEYS[1], 0, -1, ‘WITHSCORES’) for i2, #z, 2 do sumsumz[i] end return sum 例子&#xff1a;lua ~$ redis-cli zadd z 1 a 2 b 3 c 4 d 5 e (integer) 5 ~$ redis-cli eval "local sum0 local zr…

Elasticsearch,Logstash和Kibana安装部署(ELK Stack)

前言 当今数字化时代&#xff0c;信息的快速增长使得各类组织和企业面临着海量数据的处理和分析挑战。在这样的背景下&#xff0c;ELK Stack&#xff08;Elasticsearch、Logstash 和 Kibana&#xff09;作为一套强大的开源工具组合&#xff0c;成为了解决数据管理、搜索和可视…

arduino - 用 arduino zero 开发板来学习理解arduino软件编程细节

文章目录 arduino - 用 arduino zero 开发板来学习理解arduino软件编程细节概述笔记实验环境不是所有的arduino工程都能在同一块开发板上编译过为啥arduino编程都是在setup()和loop()函数中实现代码?END arduino - 用 arduino zero 开发板来学习理解arduino软件编程细节 概述…

linux并发服务器 —— 多线程并发(六)

线程概述 同一个程序中的所有线程均会独立执行相同程序&#xff0c;且共享同一份全局内存区域&#xff1b; 进程是CPU分配资源的最小单位&#xff0c;线程是操作系统调度执行的最小单位&#xff1b; Linux环境下&#xff0c;线程的本质就是进程&#xff1b; ps -Lf pid&…

简单了解ARP协议

目录 一、什么是ARP协议&#xff1f; 二、为什么需要ARP协议&#xff1f; 三、ARP报文格式 四、广播域是什么&#xff1f; 五、ARP缓存表是什么&#xff1f; 六、ARP的类型 6.1 ARP代理 6.2 免费ARP 七、不同网络设备收到ARP广播报文的处理规则 八、ARP工作机制原理 …

好玩的js特效

记录一些好玩的js特效 1、鱼跳跃特效 引入jquery:https://code.jquery.com/jquery-3.7.1.min.js 源码如下&#xff1a; <!--引入jquery--> <script src"https://code.jquery.com/jquery-3.7.1.min.js"></script> <!--引入跳跃源码--> <s…

【JavaEE】_HTML

目录 1.HTML结构 2. HTML常用标签 2.1 注释标签 2.2 标题标签&#xff1a;h1~h6 2.3 段落标签&#xff1a;p 2.4 换行标签&#xff1a;br 2.5 格式化标签 2.6 图片标签&#xff1a;img 2.7 超链接标签&#xff1a;a 2.8 表格标签 2.9 列表标签 2.10 表单标签 2.10…

Java学习笔记——35多线程02

线程同步 线程同步卖票案例同步代码块同步方法块 线程安全的类StringBufferVectorHashtable Lock锁 线程同步 卖票案例 public class SellTicket implements Runnable{private int tickets10;Overridepublic void run(){while (true){if(tickets>0){System.out.println(Th…

【网络编程】IO多路复用

IO多路复用是一种高效的I/O处理方式&#xff0c;它允许单个进程能够同时监视多个文件描述符&#xff08;sockets、文件等&#xff09;&#xff0c;并在其中任何一个文件描述符准备好进行I/O操作时进行处理。它的核心在于使用少量的线程或进程来管理多个I/O操作&#xff0c;以提…

RK3568平台开发系列讲解(音视频篇)H264 的编码结构

🚀返回专栏总目录 文章目录 一、H264 的编码结构1.1、帧类型1.2、GOP1.3、Slice沉淀、分享、成长,让自己和他人都能有所收获!😄 📢视频编码的码流结构其实就是指视频经过编码之后得到的二进制数据是怎么组织的,换句话说,就是编码后的码流我们怎么将一帧帧编码后的图像…

数据结构学习系列之顺序表的两种删除方式

方式1&#xff1a;在顺序表的末端删除所存储的数据元素&#xff0c;代码如下&#xff1a;示例代码&#xff1a; int delete_seq_list_1(list_t *seq_list){if(NULL seq_list){printf("入参为NULL\n");return -1;}if(0 seq_list->count){printf("顺序表为空…

数据结构学习系列之顺序表的两种插入方式

方式1&#xff1a;在顺序表末端插入数据元素&#xff0c;代码如下&#xff1a;示例代码&#xff1a; int insert_seq_list_1(list_t *seq_list,int data){if(NULL seq_list){printf("入参为NULL\n");return -1;}if(N seq_list->count){printf("顺序表已满…

通过rabbitmq生成延时消息,并生成rabbitmq镜像

通过rabbitmq生成延时消息队列&#xff0c;并生成rabbitmq镜像 整体描述1. 使用场景2. 目前问题3. 前期准备 具体步骤1. 拉取镜像2. 运行镜像3. 安装插件4. 代码支持4.1 config文件4.2 消费监听4.2 消息生产 5. 功能测试 镜像操作1. 镜像制作2. 镜像导入 总结 整体描述 1. 使用…

Stable Diffusion WebUI中COMMANDLINE_ARGS参数配置说明

Windows用户: 在webui-user.bat文件的set COMMANDLINE_ARGS=后面配置 Linux用户: 在webui-user.sh文件的export COMMANDLINE_ARGS=""引号中配置 COMMANDLINE_ARGS详细参数配置说明 配置(Configuration)-h, –help无错误显示此帮助消息并退出–config配置配置/稳…

蠕虫病毒流量分析案例

背景 某供排水集团的网络管理员对其网络的健康状况持认可态度&#xff0c;表示网络运行正常&#xff0c;没有发现异常行为。然而&#xff0c;由于网络环境变得越来越复杂&#xff0c;仅凭借传统的网络经验已经不能全面了解网络情况。因此&#xff0c;我们为供排水集团安装了Ne…

Codeforces Round 895 (Div. 3)

A. Two Vessels 求出目标水位&#xff0c;然后计算倒水的次数向上取整即可 void solve(){db a, b, c; cin >> a >> b >> c;print(int(ceil((max(a, b) - (abs(b a) / 2)) / c))); } B. The Corridor or There and Back Again 对于每个可能被激活的陷阱&…

使用Docker部署Gitlab的记录

docker版本 使用docker -v查看 Docker version 1.13.1, build 7d71120/1.13.1运行容器镜像 映射本机的9980端口为Docker内部的80端口 映射本机的9922端口为Docker内部的22端口 使用root用户启动 映射本机目录/mnt/sda/gitlab/log为Docker内部的/var/log/gitlab 映射本机目录…

4 | Java Spark实现 WordCount

简单的 Java Spark 实现 WordCount 的教程,它将教您如何使用 Apache Spark 来统计文本文件中每个单词的出现次数。 首先,确保您已经安装了 Apache Spark 并设置了运行环境。您需要准备一个包含文本内容的文本文件,以便对其进行 WordCount 分析。 代码 package com.bigdat…

我的创作纪念日-2023

突然看到CSDN有这么一个发文模版&#xff08;后文都是按照模版填空了&#xff09;&#xff0c;那就写一些吧。 机缘 具体有什么机缘呢&#xff1f;简单就是说&#xff0c;在CSDN上得到了一些帮助&#xff0c;因此也想写一些文章以期帮助别人。为什么不在自己的网站写呢&#…

Golang复习

golang的特点 Golang 针对并发进行了优化&#xff0c;并且在规模上运行良好 自动垃圾收集明显比 Java 或 Python 更有效&#xff0c;因为它与程序同时执行 golang数据类型 基本数据类型&#xff08;值类型&#xff09; 布尔类型 数字类型 整型 根据有符号分为&#xff1a;…