React創(chuàng)建組件的三種方式及其區(qū)別
React推出后，出于不同的原因先后出現(xiàn)三種定義react組件的方式，殊途同歸；具體的三種方式：
函數(shù)式定義的無狀態(tài)組件
es5原生方式React.createClass定義的組件
es6形式的extends React.Component定義的組件
雖然有三種方式可以定義react的組件，那么這三種定義組件方式有什么不同呢？或者說為什么會出現(xiàn)對應(yīng)的定義方式呢？下面就簡單介紹一下。
無狀態(tài)函數(shù)式組件
創(chuàng)建無狀態(tài)函數(shù)式組件形式是從React 0.14版本開始出現(xiàn)的。它是為了創(chuàng)建純展示組件，這種組件只負(fù)責(zé)根據(jù)傳入的props來展示，不涉及到要state狀態(tài)的操作。具體的無狀態(tài)函數(shù)式組件，其官方指出：
在大部分React代碼中，大多數(shù)組件被寫成無狀態(tài)的組件，通過簡單組合可以構(gòu)建成其他的組件等；這種通過多個(gè)簡單然后合并成一個(gè)大應(yīng)用的設(shè)計(jì)模式被提倡。
無狀態(tài)函數(shù)式組件形式上表現(xiàn)為一個(gè)只帶有一個(gè)render方法的組件類，通過函數(shù)形式或者ES6 arrow function的形式在創(chuàng)建，并且該組件是無state狀態(tài)的。具體的創(chuàng)建形式如下：
functionHelloComponent(props,/* context */){return
Hello{props.name}
}ReactDOM.render(,mountNode)
無狀態(tài)組件的創(chuàng)建形式使代碼的可讀性更好，并且減少了大量冗余的代碼，精簡至只有一個(gè)render方法，大大的增強(qiáng)了編寫一個(gè)組件的便利，除此之外無狀態(tài)組件還有以下幾個(gè)顯著的特點(diǎn)：
組件不會被實(shí)例化，整體渲染性能得到提升
因?yàn)榻M件被精簡成一個(gè)render方法的函數(shù)來實(shí)現(xiàn)的，由于是無狀態(tài)組件，所以無狀態(tài)組件就不會在有組件實(shí)例化的過程，無實(shí)例化過程也就不需要分配多余的內(nèi)存，從而性能得到一定的提升。
組件不能訪問this對象
無狀態(tài)組件由于沒有實(shí)例化過程，所以無法訪問組件this中的對象，例如：this.ref、this.state等均不能訪問。若想訪問就不能使用這種形式來創(chuàng)建組件
組件無法訪問生命周期的方法
因?yàn)闊o狀態(tài)組件是不需要組件生命周期管理和狀態(tài)管理，所以底層實(shí)現(xiàn)這種形式的組件時(shí)是不會實(shí)現(xiàn)組件的生命周期方法。所以無狀態(tài)組件是不能參與組件的各個(gè)生命周期管理的。
無狀態(tài)組件只能訪問輸入的props，同樣的props會得到同樣的渲染結(jié)果，不會有副作用
無狀態(tài)組件被鼓勵(lì)在大型項(xiàng)目中盡可能以簡單的寫法來分割原本龐大的組件，未來React也會這種面向無狀態(tài)組件在譬如無意義的檢查和內(nèi)存分配領(lǐng)域進(jìn)行一系列優(yōu)化，所以只要有可能，盡量使用無狀態(tài)組件。
React.createClass
`React.createClass`是react剛開始推薦的創(chuàng)建組件的方式，這是ES5的原生的JavaScript來實(shí)現(xiàn)的React組件，其形式如下：
varInputControlES5=React.createClass({propTypes:{//定義傳入props中的屬性各種類型initialValue:React.PropTypes.string},defaultProps:{//組件默認(rèn)的props對象initialValue:''},// 設(shè)置 initial stategetInitialState:function(){//組件相關(guān)的狀態(tài)對象return{text:this.props.initialValue||'placeholder'};},handleChange:function(event){this.setState({//this represents react component instancetext:event.target.value});},render:function(){return(
Typesomething:
);}});InputControlES6.propTypes={initialValue:React.PropTypes.string};InputControlES6.defaultProps={initialValue:''};
與無狀態(tài)組件相比，React.createClass和后面要描述的React.Component都是創(chuàng)建有狀態(tài)的組件，這些組件是要被實(shí)例化的，并且可以訪問組件的生命周期方法。但是隨著React的發(fā)展，React.createClass形式自身的問題暴露出來：
React.createClass會自綁定函數(shù)方法（不像React.Component只綁定需要關(guān)心的函數(shù)）導(dǎo)致不必要的性能開銷，增加代碼過時(shí)的可能性。
React.createClass的mixins不夠自然、直觀；React.Component形式非常適合高階組件（Higher Order Components--HOC）,它以更直觀的形式展示了比mixins更強(qiáng)大的功能，并且HOC是純凈的JavaScript，不用擔(dān)心他們會被廢棄。HOC可以參考無狀態(tài)組件(Stateless Component) 與高階組件。
React.Component
React.Component是以ES6的形式來創(chuàng)建react的組件的，是React目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，最終會取代React.createClass形式；相對于React.createClass可以更好實(shí)現(xiàn)代碼復(fù)用。將上面React.createClass的形式改為React.Component形式如下：
classInputControlES6extendsReact.Component{constructor(props){super(props);// 設(shè)置 initial statethis.state={text:props.initialValue||'placeholder'};// ES6 類中函數(shù)必須手動(dòng)綁定this.handleChange=this.handleChange.bind(this);}handleChange(event){this.setState({text:event.target.value});}render(){return(
Typesomething:
);}}InputControlES6.propTypes={initialValue:React.PropTypes.string};InputControlES6.defaultProps={initialValue:''};
React.createClass與React.Component區(qū)別
根據(jù)上面展示代碼中二者定義組件的語法格式不同之外，二者還有很多重要的區(qū)別，下面就描述一下二者的主要區(qū)別。
函數(shù)this自綁定
React.createClass創(chuàng)建的組件，其每一個(gè)成員函數(shù)的this都有React自動(dòng)綁定，任何時(shí)候使用，直接使用this.method即可，函數(shù)中的this會被正確設(shè)置。
constContacts=React.createClass({handleClick(){console.log(this);// React Component instance},render(){return();}});
React.Component創(chuàng)建的組件，其成員函數(shù)不會自動(dòng)綁定this，需要開發(fā)者手動(dòng)綁定，否則this不能獲取當(dāng)前組件實(shí)例對象。
classContactsextendsReact.Component{constructor(props){super(props);}handleClick(){console.log(this);// null}render(){return();}
當(dāng)然，React.Component有三種手動(dòng)綁定方法：可以在構(gòu)造函數(shù)中完成綁定，也可以在調(diào)用時(shí)使用method.bind(this)來完成綁定，還可以使用arrow function來綁定。拿上例的handleClick函數(shù)來說，其綁定可以有：
constructor(props){super(props);this.handleClick=this.handleClick.bind(this);//構(gòu)造函數(shù)中綁定}
//使用bind來綁定
this.handleClick()}>
//使用arrow function來綁定
組件屬性類型propTypes及其默認(rèn)props屬性defaultProps配置不同
React.createClass在創(chuàng)建組件時(shí)，有關(guān)組件props的屬性類型及組件默認(rèn)的屬性會作為組件實(shí)例的屬性來配置，其中defaultProps是使用getDefaultProps的方法來獲取默認(rèn)組件屬性的
constTodoItem=React.createClass({propTypes:{// as an objectname:React.PropTypes.string},getDefaultProps(){// return a objectreturn{name:''}}render(){return
}})
React.Component在創(chuàng)建組件時(shí)配置這兩個(gè)對應(yīng)信息時(shí)，他們是作為組件類的屬性，不是組件實(shí)例的屬性，也就是所謂的類的靜態(tài)屬性來配置的。對應(yīng)上面配置如下：
classTodoItemextendsReact.Component{staticpropTypes={//類的靜態(tài)屬性name:React.PropTypes.string};staticdefaultProps={//類的靜態(tài)屬性name:''};...}
組件初始狀態(tài)state的配置不同
React.createClass創(chuàng)建的組件，其狀態(tài)state是通過getInitialState方法來配置組件相關(guān)的狀態(tài)；
React.Component創(chuàng)建的組件，其狀態(tài)state是在constructor中像初始化組件屬性一樣聲明的。
constTodoItem=React.createClass({// return an objectgetInitialState(){return{isEditing:false}}render(){return
}})
classTodoItemextendsReact.Component{constructor(props){super(props);this.state={// define this.state in constructorisEditing:false}}render(){return
}}
Mixins的支持不同
Mixins(混入)是面向?qū)ο缶幊蘋OP的一種實(shí)現(xiàn)，其作用是為了復(fù)用共有的代碼，將共有的代碼通過抽取為一個(gè)對象，然后通過Mixins進(jìn)該對象來達(dá)到代碼復(fù)用。具體可以參考React Mixin的前世今生。
React.createClass在創(chuàng)建組件時(shí)可以使用mixins屬性，以數(shù)組的形式來混合類的集合。
varSomeMixin={doSomething(){}};constContacts=React.createClass({mixins:[SomeMixin],handleClick(){this.doSomething();// use mixin},render(){return();}});
但是遺憾的是React.Component這種形式并不支持Mixins，至今React團(tuán)隊(duì)還沒有給出一個(gè)該形式下的官方解決方案；但是React開發(fā)者社區(qū)提供一個(gè)全新的方式來取代Mixins,那就是Higher-Order Components，具體細(xì)節(jié)可以參考這篇文章
如何選擇哪種方式創(chuàng)建組件
由于React團(tuán)隊(duì)已經(jīng)聲明React.createClass最終會被React.Component的類形式所取代。但是在找到Mixins替代方案之前是不會廢棄掉React.createClass形式。所以：
能用React.Component創(chuàng)建的組件的就盡量不用React.createClass形式創(chuàng)建組件。
除此之外，創(chuàng)建組件的形式選擇還應(yīng)該根據(jù)下面來決定：
1、只要有可能，盡量使用無狀態(tài)組件創(chuàng)建形式。2、否則（如需要state、生命周期方法等），使用`React.Component`這種es6形式創(chuàng)建組件
補(bǔ)充一點(diǎn)
無狀態(tài)組件內(nèi)部其實(shí)是可以使用ref功能的，雖然不能通過this.refs訪問到，但是可以通過將ref內(nèi)容保存到無狀態(tài)組件內(nèi)部的一個(gè)本地變量中獲取到。
例如下面這段代碼可以使用ref來獲取組件掛載到dom中后所指向的dom元素：
functionTestComp(props){letref;return(
ref=node}>...
)}
轉(zhuǎn)自 http://www.cnblogs.com/wonyun/p/5930333.html
