useResizeObserver

使用 ResizeObserver MDN 跟踪元素大小。

useResizeObserver 封装了原生 ResizeObserver API，用于监视 DOM 元素的大小变化。它在元素尺寸改变时调用带有完整 ResizeObserverEntry 数组的回调。该 hook 返回一个 stop 函数来断开观察器。你还可以传入 ResizeObserverOptions 来控制观察的盒模型（content-box、border-box 或 device-pixel-content-box）。

使用场景

• 响应元素大小变化执行自定义逻辑（例如重新计算布局或重绘 canvas）
• 构建需要原始 ResizeObserver 条目进行高级测量逻辑的包装组件
• 观察独立于窗口调整大小的元素的大小变化（例如可调整大小的面板、flex 项目）

注意事项

• 性能：ResizeObserver 比轮询元素尺寸或监听窗口 resize 事件高效得多。回调仅在被观察元素实际改变大小时触发。
• 清理：观察器在卸载时自动断开。随时调用返回的 stop 函数手动断开。
• 参见 useElementSize 了解简单的 [width, height] 返回值，以及 useMeasure 了解完整的 DOMRect 返回值——两者都基于 ResizeObserver 构建。

Usage

function Demo() {
  const ref = useRef<HTMLTextAreaElement>(null);
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const stop = useResizeObserver(ref, (entries) => {
    const [entry] = entries;
    const { width, height } = entry.contentRect;
    setWidth(width);
    setHeight(height);
  });

  return (
    <div>
      <div>调整框的大小以查看变化</div>
      <div>
        <button onClick={() => stop()}>停止观察</button>
      </div>
      <br />
      <textarea
        ref={ref}
        disabled
        style={{ width: 286, height: 166 }}
        value={`宽度: ${width}\n高度: ${height}`}
      />
    </div>
  );
};

API

useResizeObserver

Returns

() => void

Arguments

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;