`React.createElement（...）`和`new MyComponent（）`有什麼區別？

Question

簡介：我對React有點困惑。我看過文章說React組件只是接收道具並呈現給虛擬DOM的函數。然而，我所看到的是，他們是成熟的有形怪物，我發現沒有辦法像功能一樣對待他們。

問題：爲什麼React組件的每個用法都包含在React.createElement中？爲什麼我不能用new MyComponent()代替？當我在DevTools中完成時，它看起來非常相似。爲什麼需要React.createElement，因爲組件是使用React.createClass創建的？它看起來對我來說是多餘的。

編輯：這看起來相關：https://gist.github.com/sebmarkbage/ae327f2eda03bf165261

編輯＃2：這是相關的，但不是React.Component vs React.createClass重複，這個問題詢問有關創建類。我並沒有要求創建新的組件類，而是詢問如何創建該類的實例（元素）。

Answer 1

我想我found the answer here：

在0.12做出反應，我們正在做的核心變化React.createClass（...）和JSX是如何工作的。

（...）

目前var Button = React.createClass(...)做兩件事情。它 創建一個類和一個輔助函數來創建ReactElements。這是 實質上等同於這樣：

class ButtonClass { } 

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

module.exports = ButtonFactory; ``` 

然後你通過調用 ButtonFactory訪問這在消耗組件。

var Button = require('Button'); 

class App { render() { 
    return Button({ prop: 'foo '}); // ReactElement 
} } 

從概念上講，這是錯誤的模型。源組件不應該由 負責App的輸出。

有幾個問題是：

• ES6類不能直接出口，他們需要包裝。
• 有沒有方便的方式來訪問實際的類，它會混淆你正在使用哪一個。
• 靜態方法被封裝在非實函數的幫助器中。作爲一種方便。
• 自動模擬會破壞工廠，因此無法在不禁用模擬的情況下測試渲染結果。
• 工廠可以被其他工廠包裝，返回與ReactElements不同的工廠。使測試和優化 不可能。
• 具有用於對象管理的專用功能的語言必須遵循React而不是使用內置功能。