模态框中React应用二次加载失败问题排查与解决

核心问题是ES模块的浏览器缓存机制：

• 当第一次加载<script type="module" src="react-app.js"></script>时，浏览器会将该模块缓存，同一个URL的模块只会被加载并执行一次。
• 即使你删除模态框DOM后，再次通过AJAX插入相同的脚本标签，浏览器也不会重复执行模块内的代码，因此React的渲染逻辑不会再次触发。
• 另外，第一次执行createRoot后，根实例和DOM绑定，删除DOM后根实例并未被清理，但第二次插入新的#root时，模块代码没运行，自然不会重新创建根并渲染。

下面提供几种可行的实现方式，核心思路是让React渲染逻辑可以被重复调用，而非依赖模块的一次性执行。

方案一：将渲染逻辑暴露为全局可调用方法 #

修改你的react-app.js，把渲染逻辑封装成全局方法，供AJAX回调手动触发：

// react-app.js
import React from 'react';
import ReactDOMClient from 'react-dom/client';
import App from './App';

// 暴露全局方法，支持重复调用
window.renderReactModal = () => {
  const container = document.getElementById('root');
  if (!container) return;
  
  // 清空容器，避免残留内容
  container.innerHTML = '';
  // 创建新的根实例并渲染
  const root = ReactDOMClient.createRoot(container);
  root.render(<App />);
};

// 首次加载时自动执行一次
window.renderReactModal();

然后在你的jQuery AJAX回调中，插入DOM后手动调用该方法：

// 你的AJAX请求逻辑
$.ajax({
  url: '你的模态框内容地址',
  success: (html) => {
    // 插入模态框DOM到页面
    $('body').append(html);
    // 手动触发React渲染
    if (typeof window.renderReactModal === 'function') {
      window.renderReactModal();
    }
  }
});

方案二：分离模块加载与DOM渲染 #

提前在主页面加载一次react-app.js（避免AJAX重复加载模块），模态框的HTML只保留根容器：

<!-- 主页面提前加载模块 -->
<script type="module" src="react-app.js"></script>

<!-- AJAX获取的模态框内容简化为 -->
<div class="modal">
  <div id="root"></div>
</div>

AJAX回调中只需插入DOM并调用渲染方法：

$.ajax({
  url: '模态框容器地址',
  success: (html) => {
    $('body').append(html);
    window.renderReactModal();
  }
});

方案三：添加根实例卸载逻辑（避免内存泄漏） #

关闭模态框时，不仅删除DOM，还要卸载React根实例，防止内存泄漏：

// 模态框关闭事件逻辑
$('.modal').on('click', '.close-btn', () => {
  const container = document.getElementById('root');
  if (container) {
    // 获取React根实例（React 18+中，根容器的_root属性指向根实例）
    const root = container._root;
    if (root) {
      root.unmount(); // 卸载React应用
    }
  }
  // 删除模态框DOM
  $('.modal').remove();
});

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