聲明react組件的方式有3種：1、利用函數(shù)式定義無狀態(tài)組件；2、利用 “React.createClass()”方法來定義組件；2、利用“React.Component()”方法以ES6的形式來定義組件。

本教程操作環(huán)境：Windows7系統(tǒng)、react17.0.1版、Dell G3電腦。

react聲明（創(chuàng)建）組件的方式：

React推出后，出于不同的原因先后出現(xiàn)三種定義react組件的方式，殊途同歸;

具體的三種方式：

• 函數(shù)式定義無狀態(tài)組件

• React.createClass()定義組件

• React.Component()定義組件

雖然有三種方式可以定義react的組件，那么這三種定義組件方式有什么不同呢？或者說為什么會出現(xiàn)對應的定義方式呢？下面就簡單介紹一下。

無狀態(tài)函數(shù)式組件

創(chuàng)建無狀態(tài)函數(shù)式組件形式是從React 0.14版本開始出現(xiàn)的。它是為了創(chuàng)建純展示組件，這種組件只負責根據(jù)傳入的props來展示，不涉及到要state狀態(tài)的操作。具體的無狀態(tài)函數(shù)式組件，其官方指出：

在大部分React代碼中，大多數(shù)組件被寫成無狀態(tài)的組件，通過簡單組合可以構建成其他的組件等；這種通過多個簡單然后合并成一個大應用的設計模式被提倡。

無狀態(tài)函數(shù)式組件形式上表現(xiàn)為一個只帶有一個render方法的組件類，通過函數(shù)形式或者ES6 arrow function的形式在創(chuàng)建，并且該組件是無state狀態(tài)的。具體的創(chuàng)建形式如下：

function HelloComponent(props, /* context */) {   return <div>Hello {props.name}</div> } ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

無狀態(tài)組件的創(chuàng)建形式使代碼的可讀性更好，并且減少了大量冗余的代碼，精簡至只有一個render方法，大大的增強了編寫一個組件的便利，除此之外無狀態(tài)組件還有以下幾個顯著的特點：

無狀態(tài)組件的創(chuàng)建形式使代碼的可讀性更好，并且減少了大量冗余的代碼，精簡至只有一個render方法，大大的增強了編寫一個組件的便利，除此之外無狀態(tài)組件還有以下幾個顯著的特點：

• 組件不會被實例化，整體渲染性能得到提升

  因為組件被精簡成一個render方法的函數(shù)來實現(xiàn)的，由于是無狀態(tài)組件，所以無狀態(tài)組件就不會在有組件實例化的過程，無實例化過程也就不需要分配多余的內(nèi)存，從而性能得到一定的提升。

• 組件不能訪問this對象

  無狀態(tài)組件由于沒有實例化過程，所以無法訪問組件this中的對象，例如：this.ref、this.state等均不能訪問。若想訪問就不能使用這種形式來創(chuàng)建組件

• 組件無法訪問生命周期的方法

  因為無狀態(tài)組件是不需要組件生命周期管理和狀態(tài)管理，所以底層實現(xiàn)這種形式的組件時是不會實現(xiàn)組件的生命周期方法。所以無狀態(tài)組件是不能參與組件的各個生命周期管理的。

• 無狀態(tài)組件只能訪問輸入的props，同樣的props會得到同樣的渲染結果，不會有副作用

無狀態(tài)組件被鼓勵在大型項目中盡可能以簡單的寫法來分割原本龐大的組件，未來React也會這種面向無狀態(tài)組件在譬如無意義的檢查和內(nèi)存分配領域進行一系列優(yōu)化，所以只要有可能，盡量使用無狀態(tài)組件。

React.createClass

React.createClass 是react剛開始推薦的創(chuàng)建組件的方式，這是ES5的原生的JavaScript來實現(xiàn)的React組件，其形式如下：

var InputControlES5 = React.createClass({     propTypes: {//定義傳入props中的屬性各種類型         initialValue: React.PropTypes.string     },     defaultProps: { //組件默認的props對象         initialValue: ''     },     // 設置 initial state     getInitialState: function() {//組件相關的狀態(tài)對象         return {             text: this.props.initialValue || 'placeholder'         };     },     handleChange: function(event) {         this.setState({ //this represents react component instance             text: event.target.value         });     },     render: function() {         return (             <div>                 Type something:                 <input onChange={this.handleChange} value={this.state.text} />             </div>         );     } }); InputControlES6.propTypes = {     initialValue: React.PropTypes.string }; InputControlES6.defaultProps = {     initialValue: '' };

與無狀態(tài)組件相比，React.createClass和后面要描述的React.Component都是創(chuàng)建有狀態(tài)的組件，這些組件是要被實例化的，并且可以訪問組件的生命周期方法。但是隨著React的發(fā)展，React.createClass形式自身的問題暴露出來：

• React.createClass會自綁定函數(shù)方法（不像React.Component只綁定需要關心的函數(shù)）導致不必要的性能開銷，增加代碼過時的可能性。

• React.createClass的mixins不夠自然、直觀；React.Component形式非常適合高階組件（Higher Order Components–HOC）,它以更直觀的形式展示了比mixins更強大的功能，并且HOC是純凈的JavaScript，不用擔心他們會被廢棄。HOC可以參考《無狀態(tài)組件(Stateless Component) 與高階組件》。

React.Component

React.Component是以ES6的形式來創(chuàng)建react的組件的，是React目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會取代React.createClass形式；相對于 React.createClass可以更好實現(xiàn)代碼復用。將上面React.createClass的形式改為React.Component形式如下：

class InputControlES6 extends React.Component {     constructor(props) {         super(props);          // 設置 initial state         this.state = {             text: props.initialValue || 'placeholder'         };          // ES6 類中函數(shù)必須手動綁定         this.handleChange = this.handleChange.bind(this);     }      handleChange(event) {         this.setState({             text: event.target.value         });     }      render() {         return (             <div>                 Type something:                 <input onChange={this.handleChange}                value={this.state.text} />             </div>         );     } } InputControlES6.propTypes = {     initialValue: React.PropTypes.string }; InputControlES6.defaultProps = {     initialValue: '' };

推薦學習：《react視頻教程》