2.11 useLayoutEffect同步执行状态更新

一、useLayoutEffect同步执行状态更新

1. useEffect()是在渲染被会知道屏幕之后执行的，是异步的；useLayoutEffect()是在渲染之后，但屏幕更新之前，是同步的

2. 大部分情况下推荐采用useEffect()，性能更好。但当你的useEffect里面的操作需要处理DOM，并且会改变页面的样式，就需要使用useLayoutEffect，否则可能会出现闪屏的问题

3. useLayoutEffect 执行顺序先于 useEffect

4. useLayoutEffect与useEffect都可以获取DOM元素

   import { useEffect, useLayoutEffect, useRef } from 'react'
   
   function App() {
     const ref = useRef(null)
   
     useEffect(() => {
       console.log(1, ref.current)
     })
   
     useLayoutEffect(() => {
       console.log(2, ref.current)
     })
   
     return (
       <>
         <div>Default Template</div>
         <div ref={ref}>aaaaa</div>
       </>
     )
   }
   
   export default App