当前位置：首页 > 文章列表 > 文章 > 前端 > ResizeObserver监听元素变化实现响应式组件方法

ResizeObserver监听元素变化实现响应式组件方法

2025-10-11 10:24:26 0浏览收藏

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《Resize Observer 监听元素变化实现响应式组件方法》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

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支持。

如何利用 Resize Observer 监听元素尺寸变化并实现响应式组件？

当需要监听 DOM 元素尺寸变化并动态调整组件行为时，Resize Observer 是比传统方法（如轮询或事件监听 window.resize）更高效、更精确的选择。它能避免性能问题，并精准捕获任意元素的盒模型变化。

什么是 Resize Observer？

Resize Observer 是现代浏览器提供的 API，允许你监听元素的尺寸变化，包括宽度、高度的变化，而无需依赖窗口 resize 事件或 CSS 媒体查询。它适用于：

动态容器布局调整
图表或画布自适应父容器
响应式文本截断或字体调整
虚拟滚动或网格布局计算

基本使用方法

创建一个 ResizeObserver 实例，调用 observe 方法监听目标元素：

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

);
}