如何在React应用从DOM移除前执行卸载操作？

这确实是React和jQuery混合开发里很常见的内存坑，我给你几个不用修改插件代码就能解决的办法：

1. 利用模态框插件的内置钩子（优先尝试） #

绝大多数jQuery模态框插件（比如Bootstrap Modal、Magnific Popup等）都会提供关闭前的回调钩子，比如beforeClose、onCloseStart这类。你可以在初始化模态框的时候注册这个钩子，先执行React组件的卸载操作，再让插件继续关闭流程：

// 假设你的模态框初始化代码类似这样，根据实际插件调整钩子名称
$('#your-modal').modal({
  beforeClose: function() {
    // 找到React应用的根容器
    const reactRoot = document.getElementById('react-app-container');
    if (reactRoot) {
      // 先卸载React组件
      React.unmountComponentAtNode(reactRoot);
    }
    // 返回true允许模态框继续执行关闭逻辑
    return true;
  }
});

注意：不同插件的钩子名称可能不同，建议查一下插件的官方文档找到对应的关闭前置回调。

2. 事件委托拦截关闭触发操作 #

如果插件没有提供可用的钩子，你可以通过事件委托来拦截所有触发模态框关闭的操作：

拦截关闭按钮和遮罩层的点击 #

// 给模态框的关闭按钮和遮罩层绑定点击事件，先卸载再放行
$(document).on('click', '#your-modal .close-btn, #your-modal-overlay', function(e) {
  const reactRoot = document.getElementById('react-app-container');
  if (reactRoot) {
    React.unmountComponentAtNode(reactRoot);
  }
  // 解绑该事件避免重复执行，再让插件的默认关闭逻辑运行
  $(document).off('click', '#your-modal .close-btn, #your-modal-overlay');
});

拦截ESC键触发的关闭 #

监听全局键盘事件，当模态框处于打开状态且按下ESC键时，先卸载React组件：

$(document).on('keydown', function(e) {
  if (e.key === 'Escape' && $('#your-modal').is(':visible')) {
    const reactRoot = document.getElementById('react-app-container');
    if (reactRoot) {
      React.unmountComponentAtNode(reactRoot);
    }
    // 解绑一次事件，防止重复执行
    $(document).off('keydown', this);
  }
});

3. 用MutationObserver监听DOM移除（兜底方案） #

如果上面两种方法都不适用，还可以用MutationObserver来监听React容器节点的DOM变化，在它被插件移除前执行卸载：

const reactRoot = document.getElementById('react-app-container');
// 创建观察者实例，监听父节点的子元素变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 检查React容器是否即将被移除
    const isRootRemoved = Array.from(mutation.removedNodes).includes(reactRoot);
    if (isRootRemoved) {
      // 先卸载React组件
      React.unmountComponentAtNode(reactRoot);
      // 完成后停止监听
      observer.disconnect();
    }
  });
});

// 监听React容器的父节点（模态框内容容器）的子元素变化
observer.observe(reactRoot.parentNode, { childList: true });

这个方法通用性极强，不管插件通过什么方式移除DOM节点，都能提前触发卸载操作，避免内存泄漏。

内容的提问来源于stack exchange，提问作者jbramble76