UsubeniFantasy ·

看完就懂 useLayoutEffect

💡 原文中文，约1600字，阅读约需4分钟。

📝

内容提要

useLayoutEffect 和 useEffect 在语法上相同，但调用时机不同。useEffect 在绘制后异步执行，而 useLayoutEffect 在绘制前同步执行。useLayoutEffect 适合需要在浏览器绘制前完成的副作用，尤其是涉及 DOM 操作时，以避免视觉闪烁。一般情况下，优先使用 useEffect，只有在出现闪烁时才使用 useLayoutEffect。

🎯

关键要点

useLayoutEffect 和 useEffect 在语法上完全一致，但调用时机不同。
useEffect 在画面绘制后异步执行，而 useLayoutEffect 在画面绘制前同步执行。
useLayoutEffect 适合需要在浏览器绘制前完成的副作用，尤其是涉及 DOM 操作时。
如果 DOM 操作会引起回流或重绘，应使用 useLayoutEffect，以避免视觉闪烁。
在大多数情况下，优先使用 useEffect，只有在出现闪烁时才使用 useLayoutEffect。
useLayoutEffect 会阻塞浏览器绘制，影响性能，因此不应滥用。

🔎

延伸解读

useLayoutEffect 的适用场景

useLayoutEffect 主要用于需要在浏览器绘制前完成的副作用，特别是涉及 DOM 操作时。比如，当你需要读取元素的布局信息并立即更新 DOM，以避免用户看到闪烁效果时，使用 useLayoutEffect 是合适的。

性能考虑与使用建议

虽然 useLayoutEffect 可以解决闪烁问题，但它会阻塞浏览器的绘制，可能影响性能。因此，建议开发者在大多数情况下优先使用 useEffect，只有在确实需要避免视觉闪烁时才使用 useLayoutEffect。

理解 reflow 和 repaint

在选择使用 useLayoutEffect 时，理解 DOM 操作引起的 reflow 和 repaint 是关键。只有在这些操作会导致明显的视觉问题时，才需要考虑使用 useLayoutEffect，以确保用户体验流畅。

❓

延伸问答

useLayoutEffect 和 useEffect 有什么区别？

useLayoutEffect 在浏览器绘制前同步执行，而 useEffect 在绘制后异步执行。

什么情况下应该使用 useLayoutEffect？

当进行 DOM 操作且会引起回流或重绘时，应使用 useLayoutEffect，以避免视觉闪烁。

使用 useLayoutEffect 会有什么影响？

使用 useLayoutEffect 会阻塞浏览器绘制，可能影响性能，因此不应滥用。

在大多数情况下，应该优先使用哪个 Hook？

在大多数情况下，优先使用 useEffect，只有在出现闪烁时才使用 useLayoutEffect。

useLayoutEffect 的典型使用示例是什么？

一个典型示例是 Tooltip 组件，在获取布局信息后立即修改 DOM，以避免闪烁。

为什么 useLayoutEffect 会导致视觉闪烁？

因为 useEffect 在绘制后执行，可能导致用户看到默认位置的渲染，再跳到正确位置，从而产生闪烁。

🏷️