LayoutEffectHook
一、LayoutEffectHook
如果我们需要在页面刷新前一刻操作Dom等, 从生命周期来看很明显可以使用componentDidMount或者componentDidUpdate,但是在函数组件当中我们没办法使用这些生命周期函数该怎么办呢?
于是react提供了LayoutEffectHook。
该函数的用法和useEffect是一样
import React, { useState, useLayoutEffect, useRef } from 'react'
export default function App() {
const [n, setN] = useState(0)
const h1Ref = useRef();
useLayoutEffect(() => {
h1Ref.current.innerText = Math.random().toFixed(2);
})
return (
<div>
<h1 ref={h1Ref}>{n}</h1>
<button onClick={() => {
setN(n + 1)
}}>+</button>
</div>
)
}
2、注意
useEffect:浏览器渲染完成后,用户看到新的渲染结果之后
useLayoutEffectHook:完成了DOM改动,但还没有呈现给用户
应该尽量使用useEffect,因为它不会导致渲染阻塞,如果出现了问题,再考虑使用useLayoutEffectHook
博主开始运营自己的公众号啦,感兴趣的可以关注“飞羽逐星”微信公众号哦,拿起手机就能阅读感兴趣的博客啦!