react闪屏问题以及useEffect和useLayoutEffect的对比使用

二者对比

useEffect()是在渲染被绘制到屏幕之后执行的，是异步的；useLayoutEffect()是在渲染之后但在屏幕更新之前执行的，是同步的。

二者均是等待jsx执行完毕后再执行，但useLayoutEffect()在useEffect()之前触发。

大部分情况下采用useEffect()，因为它的性能更好。但当你的useEffect中需要操作dom，并且会改变页面的样式，就需要使用useLayoutEffect()，否则可能会出现闪屏问题。

实例

当useEffect中操作较多时，容易出现闪屏。

import { useEffect,useState} from "react"

function App(){
  const [msg,setMsg] = useState("hello world")
  useEffect(()=>{
    // 模拟处理较慢的操作
    for(let i=0;i<100000000;i++){}
    setMsg("world hello")
  })
  
  return (
  	<div>{msg}</div>
  )
}

此时，需要使用useLayoutEffect()，它会等待所有操作完毕后，再去渲染页面，所以不会出现闪屏问题。

import { useLayoutEffect,useState} from "react"

function App(){
  const [msg,setMsg] = useState("hello world")
  useLayoutEffect(()=>{
    // 模拟处理较慢的操作
    for(let i=0;i<100000000;i++){}
    setMsg("world hello")
  })
  
  return (
  	<div>{msg}</div>
  )
}