使用 useLayoutEffect 测量 DOM 元素

element.getBoundingClientRect() 会返回一个 DOMRect 对象，其中包含元素相对于视口的大小和位置：top、right、bottom、left、width 和 height。为了返回准确值，它会强制浏览器执行布局计算，因此应减少调用次数。

如果您在 useEffect 中读取 getBoundingClientRect()，浏览器此时已经完成绘制。如果随后根据测量结果设置状态，React 会重新渲染，浏览器也会再次绘制。用户可能会先短暂看到位置或大小错误的元素，然后在第二次绘制时看到修正后的结果。

在 useLayoutEffect 中读取测量值发生在 DOM 变更之后、绘制之前。由测量触发的任何状态更新都会使 React 同步重新渲染并提交修正后的 DOM，整个过程都发生在浏览器进行任何绘制之前。用户只会在一次绘制周期中看到最终的正确结果。

工具提示需要显示在其触发元素附近。请在 useLayoutEffect 中使用 getBoundingClientRect() 测量触发元素的位置，计算工具提示的绝对位置，并将该位置设置到状态中。工具提示会在第一次绘制时就显示在正确位置，不会从错误的初始位置发生可见跳动。

要让元素从自然（不受约束）的尺寸动画到固定尺寸，您需要在应用约束前知道它的自然尺寸。请在应用任何动画样式之前，于 useLayoutEffect 中读取元素的高度，将其存储到状态中，然后将其用作 CSS 过渡的关键帧起始值。

当页面包含粘性页眉时，正文内容需要设置与页眉高度相等的顶部内边距，以免被页眉遮挡。请在 useLayoutEffect 中使用引用测量页眉高度：headerRef.current.getBoundingClientRect().height。将该值设置为内容容器的 paddingTop。这样从第一次渲染开始，布局就是正确的。

当您在 useLayoutEffect 中调用 setState 时，React 会在同一个同步工作块中立即运行另一个渲染和提交周期。这次重新渲染也会运行其 useLayoutEffect。请注意不要造成无限循环：只有在新测量值与当前状态值不同时才更新状态。

在服务器上，DOM 元素不存在，因此 getBoundingClientRect() 会抛出异常或返回零值。请使用检查来保护您的 useLayoutEffect：if (typeof window === 'undefined') return;。对于 SSR 应用，您可能需要先使用占位尺寸进行水合，然后在客户端水合完成后再进行测量。

使用 useLayoutEffect 进行一次性测量，只能得到元素在挂载时的尺寸。若要跟踪元素在调整大小时发生的尺寸变化（例如由于窗口大小调整、动态内容或 CSS 变更），请改用 ResizeObserver。它会在元素尺寸发生变化时触发回调，因此更适合响应式组件。

如果多个副作用需要相同的测量结果，请计算一次，然后通过上下文共享，或将其作为属性向下传递。在多个 useLayoutEffect 调用中计算相同的 getBoundingClientRect() 值，会触发多次同步布局读取，而每次读取的成本都相对较高。请尽可能合并测量。

引用会在副作用运行前完成赋值。当 useLayoutEffect 触发时，可以确保 ref.current 指向 DOM 元素。这就是该模式有效的原因：useLayoutEffect(() => { const rect = ref.current.getBoundingClientRect(); ... }, [])。对于已挂载的组件，在布局副作用中引用永远不会为 null。

为什么在 useLayoutEffect 中调用 getBoundingClientRect() 比在 useEffect 中调用更好？

请在 useLayoutEffect 中使用 getBoundingClientRect()，在变更后、绘制前读取 DOM 测量值。这些测量结果触发的状态更新会导致同步重新渲染，并纳入同一次绘制，从而防止闪烁。请使用 typeof window 检查来防护 SSR。若要持续跟踪尺寸，优先使用 ResizeObserver。