[!info] related notes

• 所属 MOC: react-moc
• 相关概念:
• 易混淆概念:
• 相关资源:

React useEffect vs useLayoutEffect

共同点

两者都用于把组件与 React 外部系统同步。

它们都支持：

• 依赖；
• setup；
• cleanup；
• 依赖变化后重新同步。

区别主要不在“能做什么 API 调用”，而在同步发生的时机和它是否会阻塞浏览器绘制。

useEffect

默认优先选择。

适合：

• 网络连接；
• 订阅；
• timers；
• analytics；
• 与普通第三方系统同步。

目标通常不是在当前帧绘制前修正布局。

useLayoutEffect

适合必须在用户看到这一帧之前完成的布局相关同步，例如：

1. DOM 已经提交；
2. 读取尺寸；
3. 立刻修正位置；
4. 浏览器再绘制。

典型例子是 tooltip / popover 的同步测量和定位。

为什么不能默认使用 useLayoutEffect

因为它位于更敏感的渲染路径上。

如果 Effect 本身不要求“绘制前完成”，把它放到 layout effect 只会让页面更难尽快绘制。

因此判断顺序应是：

真的需要 Effect 吗？
  ↓ 是
是否必须在浏览器绘制前同步完成？
  ├─ 否 → useEffect
  └─ 是 → useLayoutEffect

两者都不该解决的问题

如果只是：

• 从 props/state 推导一个值；
• 响应用户点击执行逻辑；
• 整理渲染数据；

通常应直接在 render / event handler 中处理，而不是选某一种 Effect。

学习检查

1. useEffect 与 useLayoutEffect 最核心的差异发生在哪个时机？
2. 为什么大多数普通副作用应默认使用 useEffect？
3. tooltip 先测量 DOM 再同步修正位置，为什么可能需要 useLayoutEffect？
4. 为什么“useLayoutEffect 更早”不代表它“更高级”？
5. 如果一段逻辑其实只是派生 state，应该选择哪一个 Effect？为什么答案可能是“都不要”？
6. 给一个新副作用，按“是否需要 Effect → 是否依赖绘制前时机”完成决策。