React hook--- useLayoutEffect

在学习react hooks 中遇到了useLayoutEffect 这个hook ， 官方解释：

useLayoutEffect 是 useEffect 的一个版本，在浏览器重新绘制屏幕之前触发。

用法和useEffect 一样，都接收两个参数，执行副作用函数，以及依赖项数组

不同点：

• 触发时机
  1. useEffect 是在浏览器绘制之后进行触发
  2. useLayoutEffect 是在浏览器绘制之前进行触发
• 执行过程
  1. useEffect 它不会阻塞渲染，并且会在浏览器绘制完成后异步执行。
  2. useLayoutEffect 它会在浏览器绘制之前同步执行，阻塞渲染

仅仅的是我理解是：useLayoutEffect 可以在浏览器绘制之前操作DOM

官方例子比较好理解：

使用useLayoutEffect :codesandbox.io/s/4p9j2x?fi…

使用useEffect: codesandbox.io/s/55rrry?fi…

在useLayoutEffect hook 中 在浏览器绘制之前 计算toolTip 自身的高度，和宿主的top 进行比较，从而决定放置位置。在浏览器绘制之前需要确定好，而使用 useEffect 会有一个界面抖动的过程（性能差时才会发现），因为useEffect 首先浏览器绘制一个初始值，后绘制完成之后执行副作用 useEffect 再次进行绘制，就会出现抖动情况