前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-useEffect和useLayontEffect区别

简介: 前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-useEffect和useLayontEffect区别

react-useEffect和useLayontEffect区别


useEffect和uselayoutEffect都是副作用hooks,两则非常相似,同样都接收两个参数:


(1)第一个参数为函数,第二个参数为依赖列表,只有依赖更新时才会执行函数;返回一个函数,当页面刷新的或销毁的时候执行return后的代码;


(2)如果不接受第二个参数,那么在第一次渲染完成之后和每次更新渲染页面的时候,都会调用useEffect的回调函数;


useEffect和 useLayout的主要区别就是他们的执行时机不同,在浏览器中js线程与渲染线程是互斥的,当js线程执行时,渲染线程呈挂起状态,只有当js线程空闲时渲染线程才会执行,将生成的 dom绘制。useLayoutEffect在js线程执行完毕即dom更新之后立即执行,而useEffect是在渲染结束后才执行,也就是说 useLayoutEffect比 useEffect先执行。


相关文章
|
12天前
|
存储 前端开发 索引
【Web 前端】ES6中,Set和Map的区别 ?
【5月更文挑战第1天】【Web 前端】ES6中,Set和Map的区别 ?
|
15天前
|
前端开发 UED
【Web 前端】防抖与节流的区别
【4月更文挑战第22天】【Web 前端】防抖与节流的区别
|
15天前
|
前端开发 JavaScript 网络架构
【Web 前端】箭头函数和普通函数有什么区别?
【4月更文挑战第22天】【Web 前端】箭头函数和普通函数有什么区别?
|
15天前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
15天前
|
前端开发 JavaScript 索引
【Web 前端】说一说伪数组和数组的区别?
【4月更文挑战第22天】【Web 前端】说一说伪数组和数组的区别?
|
15天前
|
前端开发 JavaScript
【Web 前端】undefined 和 null 区别?
【4月更文挑战第22天】【Web 前端】undefined 和 null 区别?
【Web 前端】undefined 和 null 区别?
|
15天前
|
存储 前端开发 JavaScript
【Web 前端】JS数据类型有哪些?区别?
【4月更文挑战第22天】【Web 前端】JS数据类型有哪些?区别?
|
15天前
|
前端开发 开发者 容器
【Web 前端】相对定位,绝对定位,固定定位的区别?
【4月更文挑战第22天】【Web 前端】相对定位,绝对定位,固定定位的区别?
|
15天前
|
前端开发 JavaScript
【Web 前端】display: none 和 visibily: hidden 区别?
【4月更文挑战第22天】【Web 前端】display: none 和 visibily: hidden 区别?
|
15天前
|
XML 前端开发 JavaScript
【Web 前端】href和src的区别?
【4月更文挑战第22天】【Web 前端】href和src的区别?