resizeobserver有什么用

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    const resizeObserver = new ResizeObserver(handleResize);
    resizeObserver.observe(document.body);

    window.addEventListener("resize", handleResize);

    return () => {
      resizeObserver.disconnect();
      window.removeEventListener("resize", handleResize);
    };
  }, []);

ResizeObserver 是现代浏览器提供的一个 API，用于监听特定 DOM 元素的尺寸变化。

它和 window.addEventListener('resize') 有什么区别？ window.resize：只有当整个浏览器窗口大小改变时才会触发。 ResizeObserver：可以监听任意一个 DOM 元素（比如一个 ，或者这里的 document.body）。即使浏览器窗口没变，但如果页面布局变化导致该元素变大变小了，它也能监测到。