[react-hooks] useLayoutEffect 和 useEffect的区别

执行过程

• 你需要通过 变更 State、父元素触发 重新渲染等某种方式造成 re-render
• 当前组件就会调用 render 函数
• React 会执行 useLayoutEffect，直到该函数逻辑执行完毕
• 虚拟dom元素真实地更新到屏幕上
• 执行 useEffect 表示更新完毕

useLayoutEffect

在 render 函数之后 绘制元素到屏幕上之前 这段时间内同步执行的函数

useEffect

在 元素绘制到浏览器屏幕上之后异步执行

Tip

所以我们就能知道为什么在使用 useEffect 执行一些布局变化的时候会产生突兀感，而useLayoutEffect能够避免这类情况发生，因为useLayoutEffect是在浏览器重绘之前执行且是同步，相当于是有机会对 dom 树再做一次变更的，而useEffect则是视觉上的再次重绘

但是我至今也没有搜索到 某次 DOM 元素变更产生重绘，浏览器有相关api可以在重绘绝对完成之后进行执行的回调或相关监听方式，还妄有了解相关api的同学可以在此处留言告知我，万分感谢·Thanks♪(･ω･)ﾉ`...