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

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

2025-10-26 10:31:27 0浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《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

);
}