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

本文主要是介绍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>)
}

这篇关于react闪屏问题以及useEffect和useLayoutEffect的对比使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---