上期回顧
- 前文我們講解了 React 模板 JSX，接着我們繼續來看看 React 組件又是如何工作的呢？
- 組件化開發到了今天已經是大家的共識，在 React 中，組件同樣也是組成我們整個項目的基本單元。
react 中組件可以將UI切分成一些的獨立的、可複用的部件。組件的返回值是一個需要在也頁面上顯示的 React 元素，也就是說 React 中組件必須有返回值。示例如下：
function Hello (props){
return (<div>
<h1>Hello world</h1>
</div);
}```
整個 Hello 就是一個組件，調用的時候，我們 可以直接 調用 <Hello /> 就可以，另外這裏要注意，組件的命名必須是首字母大寫。
創建組件
在 React 中創建組件有三種方式：
1） 無狀態的函數式組件；
2） 基於ES5 的 React.createClass;
3） 基於 ES6 的 extends React.Component；
這三種方式都可以去創建一個 React 組件，但是在實際的使用過程中有什麼不同呢？我們具體來看。
函數式組件
函數式組件，是爲了創建純粹的展示組件，也就是說函數式組件一旦創建了就不能修改，除非它的父級修改了纔會引起它的修改，這樣的好處就是性能較高，內部沒有太多的東西，如 state 和 聲明週期，當然生命週期和state是什麼我們後邊再詳細說，這裏我們先大概瞭解，這倆東西主要是用來更改組件的內容，以及組件修改後的一系列處理的。
函數式組件的編寫方式如下：
function Hello (props[,context]){
return (<div>
<h1>Hello {props.name}</h1>
</div);
}
ReactDOM.render(<Hello name="MiaoV" />, node)
return 中就是我們要顯示在頁面上的內容，props 是父組件傳入的信息，context 是父祖中傳入的信息，關於這兩項的具體內容我們也放在下篇內容中詳細的講解。
除了上述內容之外，函數式組件還有以下幾個特徵：
1 組件不會被實例化，而是直接解析成 reactElemnt，整體渲染性能得到提升
2 沒有實例化，自然在組件內部我們也不能使用 this
3 組件無法訪問生命週期的方法，這個我們已經介紹過
4 組件沒有state，只能訪問 props
函數式組件由於其優良的性能，個人建議如果一個組件的內部我們不需要控制它進行改變的話，儘量還是使用 函數式組件
React.createClass
React.createClass 是一種基於 ES5 的創建組件的方式。本質就是一個工廠，在 React.createClass(配置對象) 放入我們的配置對象，然後它會幫我們返回一個 React 組件，
示例如下：
let Fn = React.createClass({
render: function(){
return (
<div>
<h1 id="title">Hello React!</h1>
<h2 id={title}>Hello React!</h2>
<h2 className="box">class屬性</h2>
<h2 style={ {background: 'red'} }>style屬性</h2>
</div>
);
}
});
上述是 React.createClass 的使用方式，但是要注意 React.createClass 方法 在React 16 之後就已經取消了，所以我們就不再討論這個方法，直接來看 ES6 的寫法。
React.Component
React ES6中，如果要聲明一個類式組件，我們需要從 React.Component 繼承過來，具體寫法如下：
class Hello extends React.Component {
render(){
return (
<h1>hello! {this.props.name}</h1>
);
}
}
ReactDOM.render(
<Hello name = "MiaoV" />
document.querySelector('#app')
);
在使用 React.Component 的時候，有一些問題是需要我們注意的：
-
在 React.Component 中我們必須要定義一個 render 方法，這個方法中的返回值，就是最終我們要渲染到頁面中 ReactElement 。
-
組件在實際調用的時候，會生成一個實例化對象，所以組件的方法中的 this 就指向這個實例化對象。
-
props 這個屬性中存儲的是我們調用時傳入的屬性，也是默認的第0個參數，所以組件中如果定義了 constructor， 必須 使用 super 繼承，另外必須 把第 0 個參數傳入去，示例如下：
-
最後強調一下，組件的命名必須首字母大寫。
class Hello extends React.Component { constructor(props){ super(props); } render(){ return ( <h1>hello! {this.props.name}</h1>
); } }
關於組件的創建我們就先介紹到這，在下一篇中，我們會詳細的講解 props,state 以及組件其他的相關知識。
——以上是筆者歸納總結，如有誤之處，歡迎指出。
訂閱號ID：Miaovclass
關注妙味訂閱號：“妙味前端”，爲您帶來優質前端技術乾貨；