如何将React与ReactDOM存入window对象以实现全局复用？

1. 页面顶部加载React和ReactDOM的UMD版本 #

React官方提供了UMD格式的包，加载后会自动将React和ReactDOM挂载到window全局对象上。你只需要在页面头部通过<script>标签优先引入这两个文件：

<!-- 先加载React和ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<!-- 再加载你的组件脚本 -->
<script src="./components/Header.js"></script>
<script src="./components/Content.js"></script>

2. 组件文件中直接使用全局变量 #

在组件脚本里，不需要再写import React from 'react'或import ReactDOM from 'react-dom'，直接调用全局的React和ReactDOM即可：

// Header.js
function Header() {
  return React.createElement('header', null, React.createElement('h1', null, '页面头部'));
}

// 渲染到对应根容器
const headerRoot = ReactDOM.createRoot(document.getElementById('header-root'));
headerRoot.render(React.createElement(Header));

如果使用JSX语法（需Babel等工具编译），同样无需额外引入React，编译后的代码会自动调用全局的React.createElement（React 17+支持自动导入，但全局挂载的方式依然兼容）：

// Content.js（需Babel编译）
function Content() {
  return <main><p>页面内容区域</p></main>;
}

const contentRoot = ReactDOM.createRoot(document.getElementById('content-root'));
contentRoot.render(<Content />);

注意事项 #

• 环境区分：开发阶段可以替换成带调试信息的开发版本（将URL中的production改为development），生产环境务必使用压缩后的生产版本以提升性能。
• 加载顺序：必须确保React和ReactDOM的脚本在你的组件脚本之前加载，否则组件运行时会找不到全局变量。
• 自定义打包：如果是自己构建React包，要确保输出格式为UMD，这样才能自动挂载到window对象。

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