在封装自定义hooks突然对useEffect的使用产生了好奇，比如我们封装 usePrevious 获取上一轮的state数据时候，官网给出的这个事例

  1. export const usePrevious= (state:any)=>{
  2.   const previousRef = useRef()
  3.   useEffect(()=>{
  4.     previousRef.current = state
  5.   })
  6.   return previousRef.current
  7. }

这让我对useEffect执行时机产生了兴趣，首先我们知道useEffect是异步执行的，也就是不会占用主线程，官网给出了三个说明
image.png
可以明确的是，useEffect是在dom生成并渲染之后执行，并不会阻塞渲染。但是如果我们要同步使用副作用怎么办呢。
官网给出了说明 useEffect 与 class 生命周期的区别，并不等价，并给出了 useLayoutEffect 提供使用建议。
image.png
我发现 useLayoutEffect 可以阻塞渲染，就是可以在视图渲染前改一下dom的长宽高啥的，并不会像 useEffect异步执行会闪烁一下（貌似没遇到过）。

总结

  1. useEffect是异步执行，在浏览器渲染之后执行，并不会阻塞主线程
  2. useLayoutEffect 是渲染之前同步执行的，会阻塞主线程渲染，
  3. useEffect 不完全等同class的生命周期