useEffect 与 useLayoutEffect 的区别

结论：useLayoutEffect 在 DOM 变更后、浏览器绘制前同步执行，会阻塞绘制；useEffect 在 commit 后异步执行（通常不阻塞绘制），更适合大多数副作用。

1. 执行时机（按 commit 阶段理解）

• useLayoutEffect：Mutation 之后、Paint 之前（同步）
• useEffect：commit 完成后，调度到后续任务中执行（异步/Passive）

2. 典型使用场景

• useLayoutEffect：需要读写布局且必须避免闪烁（测量 DOM、同步调整滚动位置）
• useEffect：数据请求、订阅、日志、与 DOM 不强相关的副作用

3. 常见追问与坑

• SSR：useLayoutEffect 在服务端无 DOM，会有告警；可用同构封装（仅在客户端使用）
• 性能：滥用 useLayoutEffect 会导致卡顿，因为它阻塞绘制

关联阅读

• commitRoot
• 初始化 effect Hook