Каковы некоторые практические примеры использования MutationObserver?
Самая запутанная вещь в этом API - это причина, по которой я его использую. Я знаю ReactJS и RxJS, и я привык к концепции, когда представление реагирует на изменение данных. Поэтому, наблюдая за изменениями в DOM, которые происходят определенно после некоторых мутаций в данных, я не вижу в этом особого смысла. Так что мой вопрос, когда (не) использовать это?
1 ответ
Вы думаете о проблеме с ситуацией, когда вы уже на шаг впереди. Если вы используете React/RxJS тогда фактическая стоимость MutationObserver скорее всего будет очень маленьким.
Однако даже в этом есть явная возможность использовать это. Предположим, вы пытаетесь использовать в своем приложении React библиотеку, которая явно не создана для него и каким-то образом модифицирует DOM, но хотите расширить ее или извлечь что-то из нее. Лучшим примером для этого будет дальнейшее расширение FancyGrid.
В настоящее время в компоненте вы вызываете такую библиотеку в componentDidMount, так же, как компонент выше. Тем не менее, это просто огонь и забыл - вы не знаете, когда это будет сделано, вы даже не знаете, что происходит "снаружи".
Войти MutationObserver, С его помощью, прежде чем связывать такую библиотеку с элементом, вы можете использовать наблюдателя, чтобы получать уведомления о том, когда элементы создаются, отслеживать их и отслеживать изменения свойств. Простейшим вариантом использования этого было бы сделать спиннер над (особенно трудоемким при нагрузке) сеткой.