学习React hook API

React hook API

useEffect(异步执行)

复制代码
`useEffect`: 是在浏览器完成绘制后异步执行的;
所以如果你在 `useEffect` 中改变了 DOM,可能会造成用户看到的画面闪烁或者不一致

useLayoutEffect(同步执行)

复制代码
`useLayoutEffect` 是在浏览器完成布局,但在绘制之前执行的。也就是说,它允许你在浏览器开始绘制之前,同步地读取 DOM 布局并使更改。这意味着,如果你在 `useLayoutEffect` 中修改了 DOM(例如,改变一个元素的宽高),则这些更改将在下一次用户看到的画面中反映出来。

使用场景:
1.读取或修改布局相关的 DOM 属性:如元素的宽高,位置等。因为`useLayoutEffect` 在浏览器布局后立即执行,因此能保证获取到最新的 DOM 信息,避免由于 DOM 信息不一致导致的布局抖动。

2.在某些需要同步执行副作用的情况下:比如需要在用户点击按钮后立即改变按钮样式的情况。因为 `useEffect` 是异步执行的,可能会导致视觉上的延迟
相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen4 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习
超浪的晨4 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8506 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
悠哉悠哉愿意6 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
快乐肚皮6 小时前
ZooKeeper学习专栏(五):Java客户端开发(原生API)详解
学习·zookeeper·java-zookeeper
慕y2746 小时前
Java学习第七十二部分——Zookeeper
java·学习·java-zookeeper