1,介绍
在用法上和 useEffect 没有任何区别,只是执行的时间点不同。
useEffect
会在组件渲染结束后,UI展示在页面上之后再执行。所以不会阻塞渲染。useLayoutEffect
会在组件渲染结束后,UI展示在页面之前执行,时间点和类组件中的componentDidMount
和componentDidUpdate
相同。
所以,如果有比较耗时的操作,会阻塞UI渲染。
举例:
export default function App() {
const [n, setN] = useState(0);
const refH1 = useRef();
useEffect(() => {
refH1.current.innerText = "abc";
});
return (
<>
<h1 ref={refH1}>{n}</h1>
<button
onClick={() => {
setN(Math.random());
}}
>
获取随机数
</button>
</>
);
}
当点击获取随机数时,页面会有闪动。也就是说重新渲染 h1 元素的内容为随机数并在页面上展示后,又会立即执行 useEffect
变为 abc
。
而如果使用 useLayoutEffect
,因为执行时间点的问题,并不会有闪动效果。
2,注意点
尽量使用 useEffect
,因为不会阻塞渲染。实现有问题了再考虑 useLayoutEffect
。
以上。