MutationObserver使用的一些实际示例是什么？

Question

对于我来说，此API中最令人困惑的是使用它的原因。我知道ReactJS和RxJS，当视图对数据更改做出反应时，我已经习惯了这个概念。因此，观看DOM的更改（肯定是在对数据进行某些更改之后发生的），我看不出它有多大意义。所以我的问题是何时（不）使用它？

Answer 1

您正在思考的问题是您已经领先一步。如果您使用的是React / RxJS，则MutationObserver的实际值很可能很小。

即使在此范围内，也有明显的可能性可以利用它。假设您正在尝试使用未明确为其构建的React应用程序中的库，并以某种方式修改DOM，但希望对其进行进一步扩展或从中获取某些东西。最好的例子是进一步增加FancyGrid。

当前，在组件中，您将在componentDidMount中调用这样的库，就像构建上面的组件一样。但是，这只是一劳永逸的操作-您不知道执行什么时候完成，甚至不知道外部发生了什么。

输入MutationObserver。使用它，在将这样的库绑定到元素之前，您可以使用观察者来通知创建元素的时间，跟踪它们以及跟踪属性更改。最简单的用例是使微调器位于（特别是耗时的）网格上方。