例子：
let Box = ReactDOM.render(React.createElement(
Progress,
{},
), document.createElement('div'));
和
let Box = ReactDOM.render(<Progress/>, document.createElement('div'));
的区别!
研究过程
1.猜测1:使用场景不同,React.createElement用来生成实例.再render渲染到dom节点, 而不是直接render渲染到dom节点
创建于：2020-06-06 15:01
React.createElement 与 ReactDOM.render 的区别
1. 核心概念对比
| 特性 | React.createElement (或 JSX <Progress />) | ReactDOM.render |
|---|---|---|
| 本质 | 创建虚拟 DOM (Virtual DOM) | 挂载到真实 DOM |
| 产物 | 一个普通的 JavaScript 对象 (React Element) | 真实 DOM 节点及其内部的组件实例 |
| 副作用 | 纯函数，无副作用，不操作浏览器 DOM | 有副作用，会修改浏览器 DOM 结构 |
| 返回值 | 返回描述界面的对象 | 返回组件实例 (Class) 或 null (Function) |
2. 详细拆解
React.createElement：定义“我想看到什么”
当你编写 <Progress /> 时，构建工具将其转译为：
let element = React.createElement(Progress, null);
- 作用：它只是在内存中创建一个轻量级的 JavaScript 对象。
- 状态：此时组件并未实例化，也没有任何 DOM 产生。它仅仅是一份“蓝图”或“声明”。
ReactDOM.render：执行“把东西画出来”
let Box = ReactDOM.render(<Progress/>, document.createElement('div'));
- 作用：它是 React 的 渲染引擎入口。
- 过程：它接收虚拟 DOM 对象，通过对比、计算，最终调用浏览器原生的 DOM API（如
appendChild）将内容挂载到物理页面上。 - 返回值：在旧版本 React 中，如果
Progress是类组件，会返回该组件的 实例，允许你在外部调用组件内部的方法。
3. 你的代码场景分析
你提供的代码：
let Box = ReactDOM.render(<Progress/>, document.createElement('div'));
这种写法常见于以下场景：
- 指令式调用：例如实现
Message.show()或Modal.confirm()。由于这些组件需要脱离 React 主挂载点（通常是#root），需要手动创建一个孤立的div并通过render渲染。 - 获取实例：通过
Box变量拿到组件实例，从而手动控制组件的状态（注意：这在现代 React 开发中已不推荐）。
结论
你的猜测是正确的：
createElement是 描述阶段：生成实例的描述对象（虚拟 DOM）。render是 执行阶段：将描述变为真实的 DOM 节点并完成组件生命周期的初始化。
注意：在 React 18+ 中，
ReactDOM.render已被createRoot取代，但其“描述 vs 挂载”的核心逻辑依然保持一致。
生成 2026-06-13 19:10