什麼是組件
組件允許我們將應用的UI拆分成獨立的、可複用的模塊，其實也就是可複用的代碼片段。React應用程序就是由組件來構建的，也就是說React應用的基石！
React中的組件類別
class組件
函數組件
class組件
這個組件主要是ES6中的寫法。我們的一個class組件的基本結構如下：
class MyComponent extends React.Component {
constructor(props) {
super(props)
}
render () {
return (<div>React</div>)
}
}
這裏要注意，constructor函數是可選的，當你沒有state時，即沒有該組件內部需要使用的自己的數據時，constructor函數可以省略。但是render函數一定不能省略，且render函數內部要通過return 返回一個React組件 或者是 null.
第二點要注意的是，對於ES6中的class，當使用constructor函數時，內部要調用super()函數。
第三點，我們發現class 繼承了React.Component，那麼這個React.Component是每一個React組件都會用到的一些函數，屬性等的一個抽象提取。繼承的思想中，父組件的作用不正是要給子組件們提供他們均可訪問的屬性和方法嗎！
函數組件
函數組件就像對簡單了，形式如下：
function MyComponent (props) {
return <div>React</div>
}
組件的通性：
React中要求自定義組件名一定要以大寫字母開頭，這是爲了區別原生HTML標籤和自定義組件。如果以小寫字母引用自定義組件的話，那麼會出錯，會因爲把自定義組件解析爲HTML標籤而出錯。
兩種組件都接受一個參數：props .這是因爲我們在調用組件時，可以對組件進行數據傳遞，上層組件傳遞過來的數據可以通過props來進行獲取訪問。
組件的調用
每次我們引用一個組件時，比如：
return <MyComponent />
這種形式，那麼會做什麼操作呢？
現在先簡單瞭解一下：
會找到相應的組件，如果爲函數組件直接調用，這時候會返回React元素。如果爲class組件，會創建一個該組件的一個實例（等價於ES6中的 new MyComponent()）
有狀態組件和無狀態組件
狀態，簡單理解就是數據的另一種稱呼。在react組件中，狀態爲state。狀態只會存在於class組件中，函數組件是沒有狀態的。對於class組件，先前說了，constructor函數可以省略。當有狀態時，其是不可以省略的。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render () {
return ....
}
}
如上所示，this.state即爲定義的狀態。
爲什麼使用state
-
react中的組件是一個可服用的具有一定功能的代碼塊。那麼，他就會有一定的處理邏輯，比如說，在一個定義的組件中可能會進行數據的請求，處理等操作，這個時候我們就要對這些數據進行保存。因此，引入了一個state對象來保存所有的數據。這樣的話，就不用一次性聲明多個變量了，既方便管理，又方便操作。
其實，在javascript good parts 一書中，道格拉斯也推薦，當你的全局變量過多時，可以通過創建對象字面量的形式來管理數據。這樣的話，你的全局變量就會減少很多。
爲什麼在constructor中使用this.state
因爲組件是複用的，上面也說到了，每次調用class組件時，其實就是創建了一個實例，那麼既然我想在每個組件中用到我的state，那麼把這個state定義到this上是必然的。