React-hooks-监听页面元素高度变化

import React, { useRef, useEffect } from 'react';

function Demo() {
  const demoRef = useRef(null);

  // 浏览器窗口高度发生改变触发
  const resizeChange = (e) => {
      console.log(e.contentRect.height, e, '监听元素正在发生变化!')
  };

  useEffect(() => {
      // 监听的函数
    const resize = new ResizeObserver((e) => {
      if (!Array.isArray(e) || !e.length) return;
      for (const ent of e) {
        resizeChange(ent);
      }
    });
     // 传入监听对象
    resize.observe(demoRef.current);
    // 及时销毁监听函数（重要!!!）
    return () => { resize.unobserve(demoRef?.current); };
  }, []);

  return (
     <div style={{ height: '100%', overflow: 'hidden' }} ref={demoRef}>
      监听div元素高度变化
    </div>
  );
}

export default Demo;