React hooks - useLayoutEffect

useLayoutEffect

        • 用法
        • 区别

用法

useLayoutEffect 和 useEffect 的使用方式很相似:

  1. useLayoutEffect 接收一个函数和一个依赖项数组作为参数
  2. 只有在数组中的依赖项发生改变时才会再次执行副作用函数
  3. useLayoutEffect 也可以返回一个清理函数
useEffect(()=>{return () => {}
}, 依赖项数组)
区别
hooks名称执行时机执行过程
useEffect在浏览器重新绘制屏幕 之后 触发异步 执行,不阻塞浏览器绘制
useLayoutEffect在浏览器重新绘制屏幕 之前 触发同步 执行,阻塞浏览器重新绘制
export const RandomNumber: React.FC = () => {const [num, setNum] = useState(Math.random() * 200)useEffect(() => {if (num === 0) {setNum(10 + Math.random() * 200)}}, [num])return (<><h1>num 的值是:{num}</h1><button onClick={() => setNum(0)}>重置 num</button></>)
}

将useEffect改成useLayoutEffect后数字不再闪烁
因为点击按钮时,num 更新为 0,但此时页面不会渲染,而是等待 useLayoutEffect 内部状态修改后才会更新页面,所以不会出现闪烁

export const RandomNumber: React.FC = () => {const [num, setNum] = useState(Math.random() * 200)useLayoutEffect(() => {if (num === 0) {setNum(10 + Math.random() * 200)}}, [num])return (<><h1>num 的值是:{num}</h1><button onClick={() => setNum(0)}>重置 num</button></>)
}

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

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

相关文章

【NVM】持久内存的架构

1 内存数据持久化 1.1 数据持久化 持久内存系统包含如下关键组件&#xff1a;微处理器、连接微处理器内存总线上的持久内存模组&#xff08;Persistent MemoryModule&#xff0c;PMM&#xff09;及持久内存上的非易失性存储介质。 使用持久内存来实现数据的持久化&#xff0c…

SpringCloud系列(22)--Ribbon默认负载轮询算法原理及源码解析

前言&#xff1a;在上一篇文章中我们介绍了如何去切换Ribbon的负载均衡模式&#xff0c;而本章节内容则是介绍Ribbon默认负载轮询算法的原理。 1、负载轮询算法公式 rest接口第N次请求数 % 服务器集群总数 实际调用服务器下标&#xff08;每次服务器重启后rest接口计数从1开始…

爬虫在金融领域的应用:股票数据收集

介绍 在金融领域&#xff0c;准确及时的数据收集对于市场分析和投资决策至关重要。股票价格作为金融市场的重要指标之一&#xff0c;通过网络爬虫技术可以高效地从多个网站获取实时股票价格信息。本文将介绍网络爬虫在金融领域中的应用&#xff0c;重点讨论如何利用Scrapy框架…

展锐平台+Android系统开发概要

文章目录 一、缩略语二、系统分区1. UIS7885android13的系统分区 三、系统编译四、开发调试 一、缩略语 BBAT&#xff1a;Baseband Auto Test&#xff0c;基带自带测试CRC&#xff1a;Cyclic Redundancy Check&#xff0c;循环冗余检验SPL&#xff1a;Secondary Program Loade…

给uniapp的扩展组件uni-file-picker设置默认显示的图片

官方给出的代码如下所示&#xff0c;但是按照官网给出的代码图片并没有显示出来。 <template><uni-file-picker readonly :value"fileLists" :imageStyles"imageStyles" file-mediatype"image"></uni-file-picker> </temp…

FLutter里的“线程” 一文通关

前言 在Flutter中&#xff0c;启动一个新线程来处理任务通常是指在另一个隔离区(isolate)中执行代码。由于Dart使用单线程模型&#xff0c;它通过隔离区来实现并发。隔离区是独立的执行线程&#xff0c;不共享内存&#xff0c;通过消息传递来通信。这种方法可以用来运行长时间…

JavaScript 自定义属性操作

在 JavaScript 中&#xff0c;可以使用自定义属性来存储与元素相关的数据。自定义属性允许开发人员在元素上存储任何类型的数据&#xff0c;包括字符串、数字、对象等。接下来&#xff0c;我将详细解析如何在 JavaScript 中操作自定义属性&#xff0c;并提供相应的代码示例。 …

四川农业大学Java实训项目圆满收官,汇智知了堂引领学子实践创新

近日&#xff0c;四川农业大学与汇智知了堂共同举办的Java实训项目正式迎来了项目汇报阶段。本次实训是汇智知了堂在高等教育领域深化校企合作、推动产教融合的一次重要实践&#xff0c;旨在为广大学子提供一个将理论知识与实际操作相结合的平台。 在实训过程中&#xff0c;汇…

cherry-markdown公式不好选中的问题

在我上一篇博客中&#xff0c;在解决公式插入预览无效之后&#xff0c;还f发现cherry-markdown是通过css的:hover来进行公式的展示&#xff0c;导致不好选中 上一篇博客速达&#xff1a;cherry-markdown公式能插入但是预览无效-CSDN博客 下面是解决方案&#xff0c;其实就是改…

selenium源码学习

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

vr数字成果展在线展示突破用户传统认知

想要轻松搭建一个充满互动与创意的3D数字展厅吗?vr互动数字展厅搭建编辑器将是您的不二之选!华锐视点3D云展平台提供的vr互动数字展厅搭建编辑器将空间重建与互动制作完美结合&#xff0c;让您轻松实现3D空间的搭建与互动营销制作。 在vr互动数字展厅搭建编辑器的帮助下&#…

ai语音机器人工作的原理流程电销机器人部署

ai机器人电销其实就相当于一个程序&#xff0c;可以代替人工进行一个电话外呼工作&#xff0c;可以模拟真人对话、智能回答客户问题。 其实机器人这个东西很早之前就已经有了&#xff0c;但是近几年&#xff0c;才被电销企业所应用。目前ai机器人电销已经取代了一部分人工&…

牛客题霸-SQL大厂面试真题(一)

本文基于前段时间学习总结的 MySQL 相关的查询语法&#xff0c;在牛客网找了相应的 MySQL 题目进行练习&#xff0c;以便加强对于 MySQL 查询语法的理解和应用。 由于涉及到的数据库表较多&#xff0c;因此本文不再展示&#xff0c;只提供 MySQL 代码与示例输出。 以下内容是…

抖店类目错放怎么办?怎么改类目?快速解决抖店类目错放问题

大家好&#xff0c;我是电商花花。 我们运营抖音小店的时候&#xff0c;都知道不要放错类目&#xff0c;也知道放错类目的后果&#xff0c;类目错放可能导致商品无法在正确的类目中展示&#xff0c;从而影响到商品的一个曝光率。 严重的话还被平台扣分&#xff0c;扣保证金&a…

隐藏服务器源IP怎么操作,看这一篇学会!

在当今的网络环境中&#xff0c;服务器作为信息和服务的中枢&#xff0c;常驻于公网之上&#xff0c;面临着各式各样的安全威胁&#xff0c;其中&#xff0c;分布式拒绝服务&#xff08;DDoS&#xff09;攻击尤为猖獗&#xff0c;它通过协调大量计算机同时向目标服务器发送请求…

跳绳步法汇总

跳绳步法 跳绳是一项多样化且富有乐趣的运动&#xff0c;拥有许多不同的步法和技巧。以下是一些常见的跳绳步法&#xff1a; 1. 基本步法 双脚并跳&#xff1a;双脚并拢一起跳&#xff0c;每次跳绳通过脚下时双脚同时离地。单脚跳&#xff1a;用一只脚跳&#xff0c;另一只脚…

设计一套Kafka到RocketMQ的双写+双读技术方案,实现无缝迁移!

设计一套Kafka到RocketMQ的双写双读技术方案&#xff0c;实现无缝迁移&#xff01; 1、背景2、方案3、具体逻辑 1、背景 假设你们公司本来线上的MQ用的主要是Kafka&#xff0c;现在要从Kafka迁移到RocketMQ去&#xff0c;那么这个迁移的过程应该怎么做呢&#xff1f;应该采用什…

JAVA开发面试超详细

一、Java 基础 1.JDK 和 JRE 有什么区别&#xff1f; jdk&#xff1a;java development kit jre&#xff1a;java runtime Environment jdk是面向开发人员的&#xff0c;是开发工具包&#xff0c;包括开发人员需要用到的一些类。 jre是java运行时环境&#xff0c;包括java虚拟机…

Selenium探险家:驾驭Web自动化的秘籍与实战

Hi&#xff0c;我是阿佑&#xff0c;今天将带大伙们学会如何使用Selenium进行高效的网站测试&#xff0c;如何配置Selenium Grid实现分布式测试&#xff0c;以及如何预测和拥抱自动化测试的未来&#xff01; 文章目录 1. 引言2. 背景介绍2.1 Selenium概览2.2 Python与Selenium的…

python数据可视化:自定义闭合区域填充颜色matplotlib.pyplot.fill()

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 python数据可视化&#xff1a; 自定义闭合区域填充颜色 matplotlib.pyplot.fill() [太阳]选择题 以下关于matplotlib.pyplot.fill()函数说法正确的是&#xff1f; import matplotlib.pyplo…