javascript - MutationObserver 使用的一些实际例子有哪些？

Question

对我来说，这个 API 中最令人困惑的是为什么使用它。我了解 ReactJS 和 RxJS，并且我已经习惯了 View 对数据更改使用react的概念。因此，观察 DOM 的变化(这肯定是在数据发生一些变化之后发生的)，我看不出它有多大意义。所以我的问题是什么时候(不)使用它？

Answer 1

您正在以已经领先一步的情况来思考问题。如果您使用的是 React/RxJS，那么 MutationObserver 的实际值很可能会非常小。

然而，即使在这种情况下，也明显有可能利用这一点。假设您尝试在 React 应用程序中使用一个未明确为其构建的库，并以某种方式修改 DOM，但想要进一步扩展它或从中捕获某些内容。最好的例子是增强 FancyGrid进一步。

目前，在组件中，您可以在 componentDidMount 中调用这样的库，与上面组件的构建方式相同。然而，这只是一劳永逸 - 你不知道它何时执行完毕，你甚至不知道“外部”发生了什么。

输入MutationObserver。有了它，在将此类库绑定(bind)到元素之前，您可以使用观察者来通知元素何时创建、跟踪它们并跟踪属性更改。最简单的用例是在网格(加载时特别耗时)上方制作一个旋转器。