两者的区别
两者的函数签名是一样的,即用法一样。两者的区别在于执行时机不同。
useEffect
是在DOM的变化渲染到屏幕后异步执行的useLayoutEffect
是在DOM变化后渲染前同步执行的
因此从执行时机上看,useLayoutEffect
要早于useEffect
执行。
举个例子
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("USE EFFECT FUNCTION TRIGGERED");
});
useLayoutEffect(() => {
console.log("USE LAYOUT EFFECT FUNCTION TRIGGERED");
});
return (
<div className="App">
<h1>{count}</h1>
<h2>
<button onClick={() => setCount(count => count + 1)}>
Update Count
</button>
</h2>
</div>
);
}
当点击按钮将计数增加时,USE LAYOUT EFFECT FUNCTION TRIGGERED
会率先打印。
使用建议
- 由于
useEffect
是异步执行,不会阻塞UI的渲染,尤其是副作用中包含有大量计算时,使用useEffect
在性能上要比useLayoutEffect
更好。因此useEffect
是我们大多数时候的选择。 useEffect
也有一些不适应的场景,比如在副作用中更改DOM时可能会导致页面抖动,因为触发了两次页面的绘制。此时应该考虑使用useLayoutEffect
。
总结
useEffect
是我们处理副作用时的第一选择,仅当我们需要在页面渲染前进行DOM的操作以防止页面抖动(尤其是涉及到动画相关)时使用useLayoutEffect
。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)