UsubeniFantasy
·
看完就懂 useLayoutEffect
💡
原文中文，约1600字，阅读约需4分钟。
📝
内容提要
useLayoutEffect 和 useEffect 在语法上相同，但调用时机不同。useEffect 在绘制后异步执行，而 useLayoutEffect 在绘制前同步执行。useLayoutEffect 适合需要在浏览器绘制前完成的副作用，尤其是涉及 DOM 操作时，以避免视觉闪烁。一般情况下，优先使用 useEffect，只有在出现闪烁时才使用 useLayoutEffect。
🎯
关键要点
- useLayoutEffect 和 useEffect 在语法上完全一致，但调用时机不同。
- useEffect 在画面绘制后异步执行，而 useLayoutEffect 在画面绘制前同步执行。
- useLayoutEffect 适合需要在浏览器绘制前完成的副作用，尤其是涉及 DOM 操作时。
- 如果 DOM 操作会引起回流或重绘，应使用 useLayoutEffect，以避免视觉闪烁。
- 在大多数情况下，优先使用 useEffect，只有在出现闪烁时才使用 useLayoutEffect。
- useLayoutEffect 会阻塞浏览器绘制，影响性能，因此不应滥用。
❓
延伸问答
useLayoutEffect 和 useEffect 有什么区别？
useLayoutEffect 在浏览器绘制前同步执行，而 useEffect 在绘制后异步执行。
什么情况下应该使用 useLayoutEffect？
当进行 DOM 操作且会引起回流或重绘时，应使用 useLayoutEffect，以避免视觉闪烁。
使用 useLayoutEffect 会有什么影响？
使用 useLayoutEffect 会阻塞浏览器绘制，可能影响性能，因此不应滥用。
在大多数情况下，应该优先使用哪个 Hook？
在大多数情况下，优先使用 useEffect，只有在出现闪烁时才使用 useLayoutEffect。
useLayoutEffect 的典型使用示例是什么？
一个典型示例是 Tooltip 组件，在获取布局信息后立即修改 DOM，以避免闪烁。
为什么 useLayoutEffect 会导致视觉闪烁？
因为 useEffect 在绘制后执行，可能导致用户看到默认位置的渲染，再跳到正确位置，从而产生闪烁。
🏷️
标签
➡️
