使用MutationObserver监控dom的变化

背景

页面分左右布局

• 左侧菜单：需要根据接口返回数据，并渲染，是异步的
• 右侧内容：使用了react-grid-layout组件，用了WidthProvider自适应宽度

问题: 刷新页面的时候， 右侧自适应宽度为整个屏幕，当左侧展示处理的时候， 右侧报表因宽度问题部分显示不全

分析

1. 让右侧组件重新resize一下，但无法依赖自身生命周期去处理（生命周期已走完）

2. 等左侧加载完后再加载右侧，右侧也是获取接口数据展示的，2个延迟相加，有一定的视觉差

3. 右侧组件监听左侧组件加载完毕， 触发resize事件

以上方案中，方案3个人觉得最佳，于是采用第三种方案

解决

如何监听左侧组件加载完毕呢？

使用MutationObserver

MutationObserver的应用案例

话不多说，上代码

// 选择需要观察变动的节点
const targetNode = document.getElementById('layout');
// 观察器的配置（需要观察什么变动）
const config = {
  attributes: true,
  childList: true,
  subtree: true
};
// 当观察到变动时执行的回调函数
const callback = function (mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList' && mutation.addedNodes?.length) {
        window.dispatchEvent(new Event('resize'))
        observer.disconnect();
    }
  }
};
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点
observer.observe(targetNode, config);
// 之后，可停止观察
// observer.disconnect();

关键参数

• targetNode
• config
• callback
• observer.observe开始监听