[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♪(・ω・)ノ`...

你可能感兴趣的:([react-hooks] useLayoutEffect 和 useEffect的区别)