useLayoutEffect函数

useEffect()是在渲染被绘制到屏幕之后执行的，是异步的;useLayoutEffect()是在渲染之后但在屏幕更新之前，是同步的。大部分情况下我们采用useEffect()性能更好。但当你的useEffect里面的操作需要处理DOM，而且会改变页面的样式，就需要用useLayoutEffect，否则可能会出现闪屏问题。

1. 使用useLayoutEffect

useLayoutEffect在useEffect之前触发：

import { useEffect, useLayoutEffect } from 'react'

function App() {
  useEffect(() => {
    console.log("useEffect开始执行。。。。。")
  })

  useLayoutEffect(() => {
    console.log("useLayoutEffect开始执行。。。。。")
  }, [])

  return (
    <div>
      <div>
        Hello APP
      </div>
    </div>
  )
}
export default App

运行效果：

2. useLayoutEffect操作DOM

import { useEffect, useLayoutEffect, useRef } from 'react'

function App() {
  const myRef = useRef(null)
  useEffect(() => {
    console.log("useEffect开始执行。。。。。")
  })

  useLayoutEffect(() => {
    console.log("useLayoutEffect开始执行。。。。。")
    myRef.current.innerHTML= "Hello World"
    // console.log(myRef.current.innerHTML)
  }, [])

  return (
    <div>
      <div ref={myRef}>
        Hello APP
      </div>
    </div>
  )
}
export default App

刷新页面不会出现闪烁：