前端学习笔记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先执行。