React 的 useLayoutEffect 和 useEffect 有什么区别？什么时候需要在绘制前测量 DOM？

知识点详解：提示框为什么会先跳一下？

位置依赖真实高度，而高度要渲染后才能知道

假设按钮在屏幕底部，提示框应该显示在它的上面。提示框文字有长有短，咱们事先不知道实际高度。

组件可以先提交 DOM，让浏览器具备可以测量的元素，再读取高度，计算正确位置，然后请求一次更新。困难就在于：第一次提交和第二次提交之间，要不要让用户看见？

useLayoutEffect 把纠正放到绘制之前

使用 useLayoutEffect，React 提交 DOM 后执行测量；测量产生的新位置再参与渲染，浏览器最终显示已经纠正的结果。官方布局示例说明了这种两次渲染、一次可见结果的用途。

用普通 Effect 时，用户可能先看到默认位置，再看到修正位置。是否出现明显闪动，还受执行时机和具体交互影响，所以不要用一次「没闪」证明它永远不会闪。

需要注意，useLayoutEffect 不发生在 DOM 提交之前。没有元素，就谈不上读取它的尺寸。

图：先显示错位置，还是先测量？。

为了位置，多付出的代价是什么？

浏览器需要等待这段工作。若测量函数反复读写布局，或者计算时间很长，正确画面虽然没有闪动，却迟迟不出现。

因此，测量只保留必要的读取与修正；网络请求、订阅和其他不影响首帧布局的操作，通常不需要放这里。尺寸会变化时，还要明确什么时候重新测量，不能只在挂载时读一次就结束。

本题解释执行阶段，没有必要再堆一个组件实现。React Hook 是客户端框架机制，Python 服务端没有同一 API，不能用普通函数模拟成相同语义。

SSR 的初始画面应该怎么处理？

服务端可以输出内容，却不能读取浏览器里的 getBoundingClientRect。客户端接管之后，才能测量真实字体、视口与元素位置。

如果这个组件本身必须等布局信息才能显示，可以先显示稳定的占位或在客户端就绪后展示；如果大部分内容不依赖测量，则保留正常服务端输出，不必为了一个提示框让整页失去 SSR。

验证时记录 DOM 提交、测量、位置修正，再查看逐帧截图。还要改变文字长度、窗口尺寸与字体加载状态，检查测量前提有没有变化。严格模式在开发环境的额外 setup/cleanup 检查，也不能误当成生产必定执行两遍。

面试官继续追问

useEffect 绝对在绘制后吗？

不是，交互触发以及布局 Effect 中的更新等情况会影响时机。不要依赖一个过度简化的时间承诺；需要绘制前完成的视觉修正，用对应的布局机制。

只读取 DOM，不设置 state，也必须用它吗？

看测量用途。若读取结果不影响当前可见画面，未必需要阻挡绘制。API 选择应跟着需求，而不是看到 DOM 就套 Hook。

用它能避免所有布局抖动吗？

不能。图片尺寸未预留、异步字体、内容插入等也会改变布局，需要分别处理。

面试速记卡

• 时机：DOM 已提交，浏览器绘制前做必要的布局修正。
• 用途：测量结果会决定当前画面的位置或尺寸。
• 代价：阻挡绘制，不能装入无关长任务。
• useEffect：不把所有情况概括为绝对绘制后。
• SSR：不运行 Effect，也没有浏览器布局可测。