二者对比

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>)
}