在React中使用ResizeObserver API是否更优？对比ref+useEffect方案

DevOps 小满

2026-8-15

问题：React中ResizeObserver对比ref+useEffect检测元素尺寸的优势？

我们已经可以通过React中的ref与useEffect检测元素尺寸变化，代码示例如下：

useEffect(() => {
  console.log("height changed to", ref.current?.clientHeight)
}, [ref.current?.clientHeight])

我疑惑ResizeObserver API相比该ref+useEffect方案有何优势？ResizeObserver自2018年推出至今，相关对比讨论却很少。在原生JavaScript中它是获取动态高度的佳选，但在React中我未发现其明显优势，测试显示两者在Chrome中更新触发时机几乎一致。网上多讲解如何结合React Hook使用ResizeObserver，却鲜少提及ref+useEffect已能满足需求。想了解在React中使用ResizeObserver API是否存在优势，或是两者差异极小？

回答

更精准的尺寸变化捕获：ref+useEffect依赖的clientHeight是React渲染周期结束后的值，若元素尺寸在渲染过程中多次变化（比如子组件异步加载导致父元素高度多次调整），useEffect只会捕获最终结果；而ResizeObserver能监听每一次尺寸变更，哪怕是同一渲染周期内的多次变化。
避免不必要的重渲染依赖开销：把ref.current?.clientHeight作为useEffect的依赖项，React会在每次组件重渲染时计算这个值并和之前对比——哪怕元素尺寸没变化，只要组件因其他状态更新重渲染，这个计算和对比就是额外开销。ResizeObserver是主动监听，只有当尺寸真的变化时才触发回调，不参与React的依赖对比流程。
支持更细致的尺寸信息：除了clientHeight/clientWidth，ResizeObserver还能获取元素的contentBoxSize、borderBoxSize等盒子模型相关的细致尺寸数据，覆盖内边距、边框等不同区域的尺寸变化；而ref+useEffect需要手动获取对应DOM属性，代码冗余度更高。
跨场景复用性更强：ResizeObserver是原生API，逻辑不绑定React的Hook机制。如果需要在React组件与原生DOM操作混合的场景中复用尺寸监听逻辑，或者未来迁移到其他框架，ResizeObserver的代码可以直接复用；而ref+useEffect方案完全依赖React生态，无法跨环境复用。
批量处理的性能优势：当需要监听大量元素的尺寸变化时，ResizeObserver内部会批量处理所有监听回调，相比给每个元素单独设置useEffect依赖，能减少React调度的额外开销，避免过多effect执行带来的性能损耗。

内容的提问来源于stack exchange，提问作者Shawn