REACT- DOM 突变警告含义

Question

[违规] 向“DOMNodeInserted”事件添加了同步 DOM 突变侦听器。考虑使用 MutationObserver 来使页面响应更快。

关于此警告还有另一个问题。我已经在那里回答了解决该问题的方法，这不是这个问题的原因。（对于那些想知道的人：如果您向事件处理程序添加 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 的函数完成后调用一个函数。