LayoutEffect Hook
浏览器的页面大致渲染过程:
对DOM进行了改动(同步代码) => 浏览器下一次渲染时间点到达 => 对比差异,进行渲染(异步)=> 用户看到新的效果
useEffect: 浏览器渲染完成后,用户看到新的效果后
useLayoutEffect:完成了DOM改动,但还没有呈现给用户。和useEffect的用法没有任何区别,
唯一的区别就是运行的时间点不同。
应该尽量使用useEffect,因为它不会导致渲染阻塞,如果出现了问题,再考虑useLayoutEffect
useLayoutEffect.pngimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
const App = () => {
const [count, setCount] = useState(0)
const h1Ref = useRef()
// 使用useEffect时 在内部用ref操作元素DOM时 有可能导致页面一进来会先闪现 0 再 变为 random值
// useEffect(() => {
// h1Ref.current.innerText = Math.random().toFixed(2)
// })
useLayoutEffect(() => {
h1Ref.current.innerText = Math.random().toFixed(2)
})
return (
<div>
<h1 ref={h1Ref}>{count}</h1>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
)
}
export default App
网友评论