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)}
},[])

最后

以上就是柔弱棉花糖为你收集整理的rc-resize-observer监听页面元素的全部内容，希望文章能够帮你解决rc-resize-observer监听页面元素所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。