在React中，ResizeObserver API是必要的还是首选的

Question

我们已经可以通过在React:中使用ref和useEffect来检测尺寸变化

useEffect(() => {
console.log("height changed to", ref.current?.clientHeight)
}, [ref.current?.clientHeight])

我想知道ResizeObserver相对于这种ref+useEffect方法的优势是什么？考虑到ResizeObserver自2018年以来已经存在了一段时间，我很惊讶没有关于这一点的在线讨论。我可以看出，如果你使用的是Vanilla Javascript，那么ResizeObserver可能是获得动态高度的最佳方式。

但在React中，我不明白ResizeObserver API如何更好。我几乎同时测试了两者和Chrome中的两个fire更新。我在网上研究过，很多人都在谈论如何使用ResizeObserver的React Hook，但这些帖子很少谈论ref+useEffect就足够了。

有人知道使用React，使用ResizeObserver API有什么优势，或者它真的与ref+useEffect方法没有太大区别吗？

Answer 1

我们已经可以通过在React:中使用ref和useEffect来检测尺寸变化

要运行useEffect，必须渲染组件。对于要渲染的组件，某个地方必须设置了状态。因此，如果所有这些都发生了，那么是的，效果可以注意到自上次渲染以来大小发生了变化。

但，若并没有任何东西可以设定状态，那个么这一切都不会发生。也许你很幸运，某些组件恰好在大小更改时设置状态，但这不是你应该依赖的。如果你删除了一些随机组件，或者试图通过跳过渲染来优化性能，你可能会突然中断调整大小；"检测"；密码

调整大小观察器的目的是让通知更改已经发生。然后您可以设置状态，并导致重新应答。所以现在，你不希望再次出现，而是知道它会发生。