React中創建組件的3種方式

目前作者所知道的創建react組件的方式有三種：

1. 函數式定義(無狀態組件)

   function MyComponent(props){
   　　return(
          <h1>mycomponent</h1>
       )
   }

2. es5原生方式

    const MyComponent=React.createClass({
           render:function () {
               return <h1>mycomponent</h1>
           }
       })

    

3. es6中class類的方式（有狀態組件）

      class MyConponent extends React.Component{
           constructor(props){
               super(props);
           }
           render() {
               return (
                   <h1>mycomponent</h1>
               );
           }
       }

   注意：無論使用哪種方式創建組件，組件名稱的首字母都必須大小，因為我們寫的是JSX，最后是需要通過babel轉義成es5的語法的，而babel在進行轉義JSX語法時，是調用了 React.createElement() 這個方法，這個方法需要接收三個參數：type, config, children。第一個參數聲明了這個元素的類型，當創建自定義組件時沒有首字母小寫時， 而 babel 在轉義時把它當成了一個字符串 傳遞進去了；當首字母大寫時，babel 在轉義時傳遞了一個變量進去。問題就在這里，如果傳遞的是一個字符串，那么在創建虛擬DOM對象時，React會認為這是一個原生的HTML標簽，但是這顯然不是一個原生的HTML標簽，因此去創建一個不存在的標簽肯定是會報錯的。如果首字母大寫，那么就會當成一個變量傳遞進去，這個時候React會知道這是一個自定義組件，因此他就不會報錯了。

　　      那么問題來了，這三種方式有啥區別呢？這里說明一個問題，很多時候同一種效果往往有很多種實現方式，所以我們在學習的過程中要避免章節化思維，要對技術進行橫向比較，這樣能幫你更　加深入的理解各種方式的優缺點。

　　　　1.函數式定義和類定義的對比

　　　　　　　函數式定義組件沒有state和生命周期函數且不能訪問this，而類定義中這些都可以有。

　　　　2.類定義和React.createClass原生定義的區別

　　　　　　　　2.1函數this的綁定

　　　　　　　　　　React.createClass創造的組件，其每一個成員函數的this都會自動由React綁定，所以使用時可以直接this.method,而通過class創建組件的成員函數則需要手動綁定，如this.method=this.method.bind(this).

　　　　　　　　2.2Mixins特性

　　　　　　　　　　使用 React.createClass 的話，我們可以在創建組件時添加一個叫做 mixins 的屬性，並將可供混合的類的集合以數組的形式賦給 mixins，關於mixins不了解的同學可以參考mixins的前世今生

 

　　　3.如何選擇哪種方式創建組件

 

　　　　　　由於React團隊已經聲明React.createClass最終會被React.Component的類形式所取代。但是在找到Mixins替代方案之前是不會廢棄掉React.createClass形式。所以：

 

能用React.Component創建的組件的就盡量不用React.createClass形式創建組件。

 

除此之外，創建組件的形式選擇還應該根據下面來決定：

 

1、只要有可能，盡量使用無狀態組件創建形式。 2、否則（如需要state、生命周期方法等），使用`React.Component`這種es6形式創建組件