如何利用 Resize Observer 监听元素尺寸变化并实现响应式组件？-js教程-PHP中文网

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

夜晨

发布： 2025-09-29 19:43:02

原创

361人浏览过

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：

Grammarly

Grammarly是一款在线语法纠正和校对工具，伟大的AI辅助写作工具

253

查看详情

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 构建响应式卡片组件：