rc-resize-observer监听页面元素

对于页面监听我们常用窗口的resize事件window.addEventListener(“resize”, watchWindowSize);
对吧，这个总的来说，还是影响页面性能，而且在页面销毁的时候，还需要手动把这个监听事件清楚掉，一但忘了，轻则页面卡顿，重则内存泄漏，对吧，所以前端优化任重道远…
今天说的是ResizeObserver
使用ResizeObserver对单个元素进行大小监听，
针对某个元素实行大小、位置变化监听的API，是一个类，它提供了一个观察器，该观察器将在每个 resize 事件上调用。
使用

import RcResizeObserver from 'rc-resize-observer';
const [responsive, setResponsive] = useState(false);

  <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 640);
        }}
      >
       <StatisticCard.Group direction={responsive ? 'column' : undefined}>
          <StatisticCard
            statistic={{
              title: '仓库容量',
              value: `${statistic?.totalCapacity}T`,
              icon: <IconFont type="icon-shujuku" style={{ fontSize: 42 }} />,
            }}
          />
           </StatisticCard.Group>
           </RcResizeObserver>

也可在hook中直接监听某个元素,因为会频繁触发，最好搭配节流函数执行

useEffect(()=>{
     const resizeObserver = new ResizeObserver((entries)=>console.log(entries))
     resizeObserver.observe(ref)
     return ()=>{resizeObserver.unobserve(ref)}
},[])