React使用Resize Observer侦听div高度变化

一些动画需要侦听div高度。最开始，我使用的是react-resize-aware框架，它通过将内嵌iframe，侦听onResize捕获事件。然而，这种方法有性能问题。后来，改用Resize Observer手写了一个侦听高度的hook。

源码

使用TypeScript和React hook：

function useResizeObserver(): [
  ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>,
  sizes: { height?: number; width?: number }
] {
  const [ref, setRef] = useState<HTMLElement | null>(null);
  const [sizes, setSizes] = useState<{ height?: number; width?: number }>({});
  useEffect(() => {
    if (!ref) return;
    const observer = new ResizeObserver(() => {
      setSizes({ height: ref.offsetHeight, width: ref.offsetWidth });
    });
    observer.observe(ref);
    return () => {
      observer.disconnect();
      setSizes({});
    };
  }, [ref]);
  return [setRef, sizes];
}

如果不使用React，只要关注ResizeObserver相关的代码，传入dom，就可以使用。

使用

我最简化了使用方式，从而契合React声明式思想，只需要向侦听元素传入一个ref即可测量。

注意，此处不是通过useRef获得dom。

function Example() {
  const [ref, sizes] = useResizeObserver();
  console.log(sizes.height, sizes.width);
  return <div ref={ref}></div>;
}

欢迎来到Yari的网站：yar2001 » React使用Resize Observer侦听div高度变化