useLayoutEffect 在浏览器绘制前同步执行，适合处理需读取 DOM 布局并避免闪烁的场景，如测量元素尺寸后立即调整位置；useEffect 在绘制后异步执行，适用于网络请求等无需阻塞渲染的操作；二者本质区别在于执行时机，useLayoutEffect 可能阻塞渲染，应谨慎使用以避免性能问题。
useLayoutEffect
就像
useEffect
的一个同步版本。区别在于
useLayoutEffect
会在浏览器绘制屏幕之前执行，而
useEffect
会在绘制之后执行。这意味着
useLayoutEffect
可以用来读取 DOM 布局并同步更新，避免闪烁。
解决方案：
useLayoutEffect
的主要用途是处理那些需要在 DOM 更新后立即执行，并且可能会影响页面布局的操作。比如，你需要测量一个元素的尺寸，然后根据这个尺寸来调整另一个元素的位置。
import React, { useState, useRef, useLayoutEffect } from 'react';
function MyComponent() {
const [height, setHeight] = useState(0);
const elementRef = useRef(null);
useLayoutEffect(() => {
if (elementRef.current) {
// 测量元素的实际高度
const actualHeight = elementRef.current.offsetHeight;
// 同步更新状态，触发重新渲染
setHeight(actualHeight);
}
}, []); // 空依赖数组，只在组件挂载后执行一次
return (
<div>
<div ref={elementRef}>
这段文字的高度会被测量。
</div>
<p>元素的高度是: {height}px</p>
</div>
);
}
export default MyComponent;
在这个例子中，
useLayoutEffect
确保了我们能在浏览器绘制之前获取到元素的实际高度，并用这个高度来更新组件的状态。
useEffect
也可以用来做类似的事情，但是可能会出现闪烁，因为状态更新和重新渲染发生在浏览器绘制之后。
为什么需要同步的副作用？
想象一下，你有一个元素，它的位置取决于另一个元素的高度。如果使用
useEffect
，可能会发生这样的情况：
- 浏览器先绘制初始状态的页面。
-
useEffect
执行，测量元素高度。
- 状态更新，组件重新渲染。
- 浏览器再次绘制页面，这次元素的位置是正确的。
在两次绘制之间，用户会看到元素的位置发生了变化，这就是闪烁。
useLayoutEffect
可以避免这种情况，因为它在第一次绘制之前就完成了所有的计算和更新。
useLayoutEffect
的陷阱：性能问题
useLayoutEffect
并不是万能的。因为它会阻塞浏览器的绘制，所以过度使用可能会导致性能问题。如果你的副作用不需要同步执行，或者不会影响页面布局，那么最好还是使用
useEffect
。
什么时候应该使用
useLayoutEffect
？
- 需要读取 DOM 布局信息： 比如测量元素尺寸、获取元素位置等。
- 需要同步更新状态，避免闪烁： 比如根据 DOM 布局信息来调整其他元素的位置。
总的来说，
useLayoutEffect
是一个强大的工具，但是需要谨慎使用。只有在确实需要同步副作用，并且副作用会影响页面布局的情况下，才应该考虑使用它。否则，
useEffect
通常是更好的选择。
useLayoutEffect
和
useEffect
的本质区别是什么？
本质区别在于它们的执行时机。
useLayoutEffect
在 DOM 更新后，浏览器绘制前同步执行，而
useEffect
在浏览器绘制后异步执行。这就决定了它们的使用场景。
useLayoutEffect
适合处理与 DOM 布局相关的副作用，避免闪烁；
useEffect
适合处理不需要同步执行的副作用，例如网络请求、定时器等。
如何调试
useLayoutEffect
相关的性能问题？
可以使用 React Profiler 来分析组件的渲染性能。Profiler 可以显示每个组件的渲染时间，以及
useLayoutEffect
的执行时间。如果发现
useLayoutEffect
的执行时间过长，可以考虑优化代码，或者使用
useEffect
来代替。还可以使用浏览器的 Performance 面板来分析页面整体的性能瓶颈。
暂无评论内容