ResizeObserver相关介绍

ResizeObserver使用方法

ResizeObserver 是一个 JavaScript API，用于监视元素的大小变化。ResizeObserver 避免了通过回调函数调整大小时，通常创建的无限回调循环和循环依赖项。

构造函数ResizeObserver

ResizeObserver 构造函数创建一个新的 ResizeObserver 对象，它可以用于监听 Element 内容盒或边框盒或者 SVGElement 边界尺寸的大小。
用法：

new ResizeObserver(callback)

在监听元素大小调整时，调用callback函数。该函数接收两个参数：
一个是entries，是 一个 ResizeObserverEntry 对象数组，可以用于获取每个元素改变后的新尺寸。
另一个则是observer，对 ResizeObserver 自身的引用，因此需要它的时候，你要从回调函数的内部访问。例如，这可用于在达到特定的情况时，自动取消对观察者的监听，但如果你不需要它，可以省略它。

方法

官方给出的ResizeObserver方法主要有三个，分别是observe、unobserve以及disconnect，下面来说一说这三个方法：

1. observe
   ResizeObserver是个构造函数。在使用new关键字调用构造函数，返回实例对象时，需要传入一个回调函数，这个回调用于监听实例对象某个DOM节点的变化，这时用到的就是observer。observer 将监听的盒模型。可能的值是：
   （1）content-box（默认） CSS 中定义的内容区域的大小。
   （2）border-box CSS 中定义的边框区域的大小。
   （3）device-pixel-content-box 在对元素或其祖先应用任何 CSS 转换之前，CSS 中定义的内容区域的大小，以设备像素为单位。
   用法如下：

observe(target)
observe(target, options)

2. unobserver
   ResizeObserver 接口的 unobserve() 方法结束对指定的 Element 或 SVGElement 的监听。
   用法：

unobserve(target)

3. disconnect
   ResizeObserver 接口的 disconnect() 方法取消所有的对 Element 或 SVGElement 目标的监听。
   用法：

disconnect()

注意

unobserve和disconnect还是有一定区别的，disconnect是取消对所有元素的监听，而unobserver取消的指定对象的监听。

示例

useEffect(() => {
	 const resizer = new ResizeObserver(() => div.resize()); //div部分就是ResizeObserverEntry 对象数组
	 resizer.observe(ref.current);   //observe方法是对指定元素的监听
	 return () => {
	   if (resizer) {
	     resizer.disconnect();  //取消对所有元素监听
	   }
	 };
}, [ref]);  // 当ref中内容改变时更新