在元素上多次调用 ResizeObserver 的观察方法是否安全？

Question

我在反应中有一种情况，我需要观察反应组件的每个 child 元素的大小。我创建了一个新的 ResizeObserver。

ro = new ResizeObserver((entries) => {
  entries.forEach((i) => {
    console.log(i.contentRect.height);
    // some action on resize
  });
});

并且观察者所有 children 我运行在 componentDidMount

中循环

Array.prototype.map.call(this.elementRef.current.children, (item) => {
        this.ro.observe(item);
      });

我还在 componentDidUnmount

中添加了取消观察的代码

Array.prototype.map.call(this.elementRef.current.children, (item) => {
            this.ro.unobserve(item);
          });

现在，我有一个 children 可以动态增加而不触发重新挂载的场景。所以我将 componentDidMount 代码添加到 componentDidUpdate。我想知道这是否安全，或者我是否必须确定哪些 children 当前未被观察，然后仅运行观察新的 children。如果可以，我该怎么做？

Answer 1

如 specs.

中所述，对同一元素多次调用 observe 是安全的

如果子容器的大小影响父容器，请考虑观察父容器而不是子容器。

在元素上多次调用 ResizeObserver 的观察方法是否安全？

Is it safe to call observe method of a ResizeObserver multiple times on an element?

javascript

reactjs

webapi