javascript - REACT- DOM 突变警告含义

Question

[Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive.

关于这个警告还有另一个问题。我已经回答了一种解决方法，这不是这个问题的原因。
(对于那些想知道的人:如果您向事件处理程序添加 setTimeOut 函数，此警告会消失，因此它不再是同步的)

真正的问题是:“DOM 变异监听器”是什么意思？或者什么是“DOM 变异监听器”？它有什么作用？我问过我的老师，他也不知道。他建议它现在可能已被弃用，但我觉得它的出现是有原因的，我想完全理解它，以防我将来遇到类似的错误但与“DOM 突变监听器”不同。

Answer 1

一个 DOM 突变监听器就像它听起来的那样——它监听 DOM 的突变。例如，如果您附加这样的监听器，然后添加或删除一个节点，监听器可能能够检测到它并触发回调。可以观察到各种类型的 DOM 突变。

对于同步的示例(速度慢、已弃用且不推荐):

container.addEventListener('DOMNodeInserted', () => {
  console.log('mutation seen!');
});

container.insertAdjacentHTML('beforeend', 'content');

<div id="container"></div>

对于这种功能，建议您改用 MutationObserver，它不是完全同步的 - MutationObserver 回调在突变后的微任务期间运行:

new MutationObserver(() => {
  console.log('mutation seen!');
}).observe(container, { childList: true });

container.insertAdjacentHTML('beforeend', 'content');

<div id="container"></div>

只有当您需要与无法更改的代码功能进行交互时，突变观察者通常才是正确的选择——例如，如果您正在使用脚本或库来更改 DOM 中的某些内容，并且您需要能够检测何时发生更改，但您无法修改源脚本，并且该脚本不提供任何外部可见的指示，表明发生了此类更改。

除了在那种(不寻常的)情况下，通常有更好的方法来响应更改，例如在更改 DOM 的函数完成后调用一个函数。