JS 监听 Dom 实时变化

使用ResizeObserver监听元素属性发生变化

var onResize = new ResizeObserver((entries) => {
   // entries 是个数组，所以也能监听多个元素
   console.log(entries[0].contentRect)
});
// 传入需要监听的元素
onResize.observe(<div>6666</div>);

React 监听Dom元素变化

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

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

  useEffect(() => {
    if (ref.current) {
      // 监测当前元素的属性变化
      new ResizeObserver((entries) => {
        console.log(entries[0].contentRect)
      }).observe(ref.current);
    }
    return () => {
      if (ref?.current) {
        new ResizeObserver(() => { }).unobserve(ref.current);
      }
    };
  }, [ref.current]);

  return <div ref={ref} style={{ height: '100%', width: '100%' }} />;
}

export default Demo;