`React.createElement(...)` 和 `new MyComponent()` 有什么区别？答案

【问题标题】：What's the difference between `React.createElement(...)` and `new MyComponent()`?`React.createElement(...)` 和 `new MyComponent()` 有什么区别？
【发布时间】：2015-08-24 09:20:42
【问题描述】：

简介：我对 React 有点困惑。我看过文章说 React 组件只是接收道具并渲染到虚拟 DOM 的函数。然而，我看到的是，它们是成熟的有状态怪物，我没有办法将它们视为函数。

问题：为什么 React 组件的每次使用都包裹在 React.createElement 中？为什么我不能改用new MyComponent()？当我在 DevTools 中执行此操作时，它看起来非常相似。既然组件是使用React.createClass 创建的，为什么还需要React.createElement？这对我来说似乎是多余的。

编辑：这看起来很相关：https://gist.github.com/sebmarkbage/ae327f2eda03bf165261

编辑#2：这是相关的，但不是React.Component vs React.createClass 的重复，该问题询问有关创建类的问题。我问的不是创建新的组件类，而是创建这些类的实例（元素）。

【问题讨论】：

React.Component vs React.createClass的可能重复

标签： javascript reactjs

【解决方案1】：

我想我found the answer here:

在 React 0.12 中，我们对 React.createClass(...) 和 JSX 的工作方式进行了核心更改。

(...)

目前var Button = React.createClass(...) 做了两件事。它创建一个类和一个辅助函数来创建 ReactElements。它是基本上相当于这个：
class ButtonClass { }

function ButtonFactory(...args) {   return
React.createElement(ButtonClass, ...args); }

module.exports = ButtonFactory; ```
然后你在消费组件中通过调用按钮工厂。
var Button = require('Button');

class App {   render() {
    return Button({ prop: 'foo '}); // ReactElement
} }
从概念上讲，这是错误的模型。源组件不应负责App的输出。

这有几个问题：

ES6 类不能直接导出，需要封装。

没有方便的方法来访问实际的类，而且您正在使用哪个类令人困惑。

静态方法被包裹在不是真正函数的助手中。为方便起见。

自动模拟会破坏工厂，因此无法在不禁用模拟的情况下测试渲染结果。

工厂可以被其他工厂包装，返回不同于 ReactElements 的东西。进行测试和优化不可能。

具有对象管理专用功能的语言必须遵循 React 而不是使用内置功能。

【讨论】：