Resize Observer是现代浏览器API，用于高效监听DOM元素尺寸变化。它通过new ResizeObserver(callback)创建实例，调用observe(target)监听目标元素，回调中可获取entry.contentRect的宽高值。相比window.resize事件或轮询，它性能更优，能精准捕获任意元素的内容区域变化，适用于动态布局、图表自适应、响应式文本等场景。在React中可封装useResizeObserver Hook，结合useRef和useEffect实现组件尺寸监听，并在卸载时disconnect()避免内存泄漏。注意contentRect不含padding、border和margin，如需精确布局可用getBoundingClientRect()，旧浏览器需引入polyfill支持。
当需要监听 DOM 元素尺寸变化并动态调整组件行为时，Resize Observer 是比传统方法（如轮询或事件监听 window.resize）更高效、更精确的选择。它能避免性能问题，并精准捕获任意元素的盒模型变化。
什么是 Resize Observer？
Resize Observer 是现代浏览器提供的 API，允许你监听元素的尺寸变化，包括宽度、高度的变化，而无需依赖窗口 resize 事件或 CSS 媒体查询。它适用于：
- 动态容器布局调整
- 图表或画布自适应父容器
- 响应式文本截断或字体调整
- 虚拟滚动或网格布局计算
基本使用方法
创建一个 ResizeObserver 实例，调用 observe 方法监听目标元素：
const observer = new ResizeObserver(entries => {for (let entry of entries) {
const { width, height } = entry.contentRect;
console.log(`尺寸变化：${width} x ${height}`);
// 根据新尺寸更新组件逻辑
}
});
// 开始监听某个元素
observer.observe(document.getElementById('my-element'));
entry.contentRect 提供的是元素内容区域的尺寸，不包含 padding、border 或 margin。
在 React 中实现响应式组件
结合 React 的 useRef 和 useEffect，可以封装一个可复用的尺寸监听 Hook：
import { useState, useRef, useEffect } from 'react';
function useResizeObserver() {
const ref = useRef(null);
const [size, setSize] = useState({ width: 0, height: 0 });
useEffect(() => {
if (!ref.current) return;
const observer = new ResizeObserver(([entry]) => {
setSize({
width: entry.contentRect.width,
height: entry.contentRect.height
});
});
observer.observe(ref.current);
return () => {
observer.disconnect();
};
}, []);
return [ref, size];
}
使用该 Hook 构建响应式卡片组件：
function ResponsiveCard() {const [ref, { width }] = useResizeObserver();
let fontSize = '16px';
if (width > 600) fontSize = '20px';
else if (width > 400) fontSize = '18px';
return (
当前容器宽度：{width}px
);
}
注意事项与优化
使用 Resize Observer 时注意以下几点：
- 确保在组件卸载时调用 disconnect()，防止内存泄漏
- 避免在回调中频繁触发状态更新，可结合防抖或节流
- contentRect 不包含边框和滚动条，若需精确布局可用 getBoundingClientRect()
- 旧版浏览器需引入 polyfill（如 resize-observer-polyfill）
基本上就这些。合理使用 Resize Observer 能让你的组件真正“感知”自身尺寸，实现更智能的响应式行为。
