React.createClass 與 ES6 箭頭函數

Question

我是 React 的新手並試圖掌握語法。

我正在 React 15 環境中開發（使用 react-starterify 模板）並且一直在使用下面版本 2 中的語法，但是，我在 Facebook 的 React 頁面中找到的大多數示例和教程都是版本 1。兩個，我什么時候應該使用一個而不是另一個？

版本 1

var MyComponent = React.createClass({
  render: function() {
    return (
      <ul>
        // some list
      </ul>
    );
  }
});

module.exports = MyOtherComponent;

版本 2

const MyComponent = () => (
  <ul>
    // some list
  </ul>
);

export default MyComponent;

Answer 1

第二個代碼是一個無狀態的函數式組件，是一種新的語法/模式，用於將組件定義為props的函數。 它是在 React v0.14 中引入的。

你可以在官方 React 博客上閱讀更多關於它的信息， 這里，在官方 React 文檔上， 這里。

這些組件的行為就像一個 React 類，只定義了一個渲染方法。 由於沒有為功能組件創建組件實例，因此添加到一個的任何 ref 將評估為 null。 函數式組件沒有生命周期方法，但您可以將.propTypes和.defaultProps設置為函數的屬性。

此模式旨在鼓勵創建這些應包含大部分應用程序的簡單組件。 將來，我們還將能夠通過避免不必要的檢查和內存分配來針對這些組件進行性能優化。

---

• 有什么區別？

  這種模式類似於“傳統”模式，不同之處在於您使用的是簡單函數而不是類中定義的方法。 當您想從類中提取函數時，這會很有用（例如，為了可讀性和清潔性）。

  需要注意的一件重要事情是功能組件只是一個功能。 這不是一個班級。 因此，沒有全局的this對象。 這意味着當您進行render您基本上是在創建ReactComponent的新實例，從而排除了這些 javascript 對象通過一些全局this相互通信的可能性。 這也導致無法使用state和任何生命周期方法。

---

• 我的應用程序如何從中受益？

  性能
  當您使用無狀態函數式組件時，React 足夠聰明，可以省略所有“傳統”生命周期方法，結果證明提供了大量優化。 React 團隊表示，他們計划在未來進一步優化內存分配並減少檢查次數。

  適應性
  因為我們只討論一個函數（而不是一個類），所以我們不需要擔心state 、生命周期方法或其他依賴項。 給定參數，該函數將始終給出相同的輸出。 因此，可以很容易地在任何我們想要的地方調整這些組件，這也使測試變得更容易。

  使用 React 的無狀態功能組件，可以輕松地對每個組件進行隔離測試。 不需要模擬、狀態操作、特殊庫或棘手的測試工具。

  鼓勵最佳實踐
  React 通常與 MVC 模式的V相比較，因為它用於創建視圖。 創建組件的“傳統”方式使得將業務邏輯（例如使用state或ref ）“侵入”到真正應該只處理渲染邏輯的組件中變得容易。 他們鼓勵懶惰和寫臭代碼。 然而，無狀態的功能組件幾乎不可能采取這樣的捷徑並強制采用更好的方法。

---

• 我什么時候應該使用一個而不是另一個？

  通常，建議盡可能使用新模式！ 如果您只需要一個render方法，但不需要生命周期方法或state ，請使用此模式。 當然，有時您確實需要使用state ，在這種情況下，您可以使用傳統模式。

  Facebook 建議在渲染靜態表示組件時使用無狀態組件。 然后，如果需要某種狀態，只需將它們包裝在有狀態組件中，以通過使用其state並將props發送到無狀態組件來管理它們。

Answer 2

添加，從 react 15.5.0 開始， React.createClass 將被棄用。 他們建議您轉到 ES2015 類或使用箭頭功能。

在 React 最初發布時，沒有在 JavaScript 中創建類的慣用方法，因此我們提供了自己的：React.createClass。

后來，類作為 ES2015 的一部分添加到語言中，因此我們添加了使用 JavaScript 類創建 React 組件的功能。 與功能組件一樣，JavaScript 類現在是在 React 中創建組件的首選方式。

對於您現有的 createClass 組件，我們建議您將它們遷移到 JavaScript 類。