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 能让你的组件真正“感知”自身尺寸，实现更智能的响应式行为。
以上就是如何利用 Resize Observer 监听元素尺寸变化并实现响应式组件？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1524638.html
微信扫一扫 
支付宝扫一扫 
