React推出后舔株，出于不同的原因先后出現(xiàn)三種定義react組件的方式妄均，殊途同歸旨指；具體的三種方式：
- 函數(shù)式定義的
無(wú)狀態(tài)組件 - es5原生方式
React.createClass定義的組件 - es6形式的
extends React.Component定義的組件
雖然有三種方式可以定義react的組件宏侍，那么這三種定義組件方式有什么不同呢桥帆？或者說(shuō)為什么會(huì)出現(xiàn)對(duì)應(yīng)的定義方式呢？下面就簡(jiǎn)單介紹一下慎皱。
無(wú)狀態(tài)函數(shù)式組件
創(chuàng)建無(wú)狀態(tài)函數(shù)式組件形式是從React 0.14版本開(kāi)始出現(xiàn)的老虫。它是為了創(chuàng)建純展示組件，這種組件只負(fù)責(zé)根據(jù)傳入的props來(lái)展示茫多，不涉及到要state狀態(tài)的操作祈匙。具體的無(wú)狀態(tài)函數(shù)式組件，其官方指出：
在大部分React代碼中天揖，大多數(shù)組件被寫(xiě)成無(wú)狀態(tài)的組件夺欲，通過(guò)簡(jiǎn)單組合可以構(gòu)建成其他的組件等；這種通過(guò)多個(gè)簡(jiǎn)單然后合并成一個(gè)大應(yīng)用的設(shè)計(jì)模式被提倡今膊。
無(wú)狀態(tài)函數(shù)式組件形式上表現(xiàn)為一個(gè)只帶有一個(gè)render方法的組件類些阅，通過(guò)函數(shù)形式或者ES6 arrow function的形式在創(chuàng)建，并且該組件是無(wú)state狀態(tài)的斑唬。具體的創(chuàng)建形式如下：
function HelloComponent(props, /* context */) {
return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)
無(wú)狀態(tài)組件的創(chuàng)建形式使代碼的可讀性更好市埋，并且減少了大量冗余的代碼，精簡(jiǎn)至只有一個(gè)render方法恕刘，大大的增強(qiáng)了編寫(xiě)一個(gè)組件的便利缤谎，除此之外無(wú)狀態(tài)組件還有以下幾個(gè)顯著的特點(diǎn)：
-
組件不會(huì)被實(shí)例化，整體渲染性能得到提升
因?yàn)榻M件被精簡(jiǎn)成一個(gè)render方法的函數(shù)來(lái)實(shí)現(xiàn)的褐着，由于是無(wú)狀態(tài)組件坷澡，所以無(wú)狀態(tài)組件就不會(huì)在有組件實(shí)例化的過(guò)程，無(wú)實(shí)例化過(guò)程也就不需要分配多余的內(nèi)存含蓉，從而性能得到一定的提升频敛。 -
組件不能訪問(wèn)
this對(duì)象
無(wú)狀態(tài)組件由于沒(méi)有實(shí)例化過(guò)程，所以無(wú)法訪問(wèn)組件this中的對(duì)象馅扣，例如：this.ref斟赚、this.state等均不能訪問(wèn)。若想訪問(wèn)就不能使用這種形式來(lái)創(chuàng)建組件 -
組件無(wú)法訪問(wèn)生命周期的方法
因?yàn)闊o(wú)狀態(tài)組件是不需要組件生命周期管理和狀態(tài)管理岂嗓，所以底層實(shí)現(xiàn)這種形式的組件時(shí)是不會(huì)實(shí)現(xiàn)組件的生命周期方法。所以無(wú)狀態(tài)組件是不能參與組件的各個(gè)生命周期管理的鹊碍。 - 無(wú)狀態(tài)組件只能訪問(wèn)輸入的props厌殉，同樣的props會(huì)得到同樣的渲染結(jié)果，不會(huì)有副作用
無(wú)狀態(tài)組件被鼓勵(lì)在大型項(xiàng)目中盡可能以簡(jiǎn)單的寫(xiě)法來(lái)分割原本龐大的組件侈咕，未來(lái)React也會(huì)這種面向無(wú)狀態(tài)組件在譬如無(wú)意義的檢查和內(nèi)存分配領(lǐng)域進(jìn)行一系列優(yōu)化公罕，所以只要有可能，盡量使用無(wú)狀態(tài)組件耀销。
React.createClass
React.createClass是react剛開(kāi)始推薦的創(chuàng)建組件的方式楼眷，這是ES5的原生的JavaScript來(lái)實(shí)現(xiàn)的React組件，其形式如下：
var InputControlES5 = React.createClass({
propTypes: {//定義傳入props中的屬性各種類型
initialValue: React.PropTypes.string
},
defaultProps: { //組件默認(rèn)的props對(duì)象
initialValue: ''
},
// 設(shè)置 initial state
getInitialState: function() {//組件相關(guān)的狀態(tài)對(duì)象
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: ''
};
與無(wú)狀態(tài)組件相比，React.createClass和后面要描述的React.Component都是創(chuàng)建有狀態(tài)的組件罐柳，這些組件是要被實(shí)例化的掌腰，并且可以訪問(wèn)組件的生命周期方法。但是隨著React的發(fā)展张吉，React.createClass形式自身的問(wèn)題暴露出來(lái)：
- React.createClass會(huì)自綁定函數(shù)方法（不像React.Component只綁定需要關(guān)心的函數(shù)）導(dǎo)致不必要的性能開(kāi)銷齿梁，增加代碼過(guò)時(shí)的可能性。
- React.createClass的mixins不夠自然肮蛹、直觀勺择；React.Component形式非常適合高階組件（Higher Order Components--HOC）,它以更直觀的形式展示了比mixins更強(qiáng)大的功能，并且HOC是純凈的JavaScript伦忠，不用擔(dān)心他們會(huì)被廢棄省核。HOC可以參考無(wú)狀態(tài)組件(Stateless Component) 與高階組件。
React.Component
React.Component是以ES6的形式來(lái)創(chuàng)建react的組件的昆码，是React目前極為推薦的創(chuàng)建有狀態(tài)組件的方式气忠，最終會(huì)取代React.createClass形式；相對(duì)于 React.createClass可以更好實(shí)現(xiàn)代碼復(fù)用未桥。將上面React.createClass的形式改為React.Component形式如下：
class InputControlES6 extends React.Component {
constructor(props) {
super(props);
// 設(shè)置 initial state
this.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 (
<div>
Type something:
<input onChange={this.handleChange}
value={this.state.text} />
</div>
);
}
}
InputControlES6.propTypes = {
initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
initialValue: ''
};
React.createClass與React.Component區(qū)別
根據(jù)上面展示代碼中二者定義組件的語(yǔ)法格式不同之外笔刹，二者還有很多重要的區(qū)別，下面就描述一下二者的主要區(qū)別冬耿。
函數(shù)this自綁定
React.createClass創(chuàng)建的組件舌菜，其每一個(gè)成員函數(shù)的this都有React自動(dòng)綁定，任何時(shí)候使用亦镶，直接使用this.method即可日月，函數(shù)中的this會(huì)被正確設(shè)置。
const Contacts = React.createClass({
handleClick() {
console.log(this); // React Component instance
},
render() {
return (
<div onClick={this.handleClick}></div>
);
}
});
React.Component創(chuàng)建的組件缤骨，其成員函數(shù)不會(huì)自動(dòng)綁定this爱咬，需要開(kāi)發(fā)者手動(dòng)綁定，否則this不能獲取當(dāng)前組件實(shí)例對(duì)象。
class Contacts extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
console.log(this); // null
}
render() {
return (
<div onClick={this.handleClick}></div>
);
}
當(dāng)然，React.Component有三種手動(dòng)綁定方法：可以在構(gòu)造函數(shù)中完成綁定冻河，也可以在調(diào)用時(shí)使用method.bind(this)來(lái)完成綁定砌创，還可以使用arrow function來(lái)綁定。拿上例的handleClick函數(shù)來(lái)說(shuō)，其綁定可以有：
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this); //構(gòu)造函數(shù)中綁定
}
<div onClick={this.handleClick.bind(this)}></div> //使用bind來(lái)綁定
<div onClick={()=>this.handleClick()}></div> //使用arrow function來(lái)綁定
組件屬性類型propTypes及其默認(rèn)props屬性defaultProps配置不同
React.createClass在創(chuàng)建組件時(shí)，有關(guān)組件props的屬性類型及組件默認(rèn)的屬性會(huì)作為組件實(shí)例的屬性來(lái)配置，其中defaultProps是使用getDefaultProps的方法來(lái)獲取默認(rèn)組件屬性的
const TodoItem = React.createClass({
propTypes: { // as an object
name: React.PropTypes.string
},
getDefaultProps(){ // return a object
return {
name: ''
}
}
render(){
return <div></div>
}
})
React.Component在創(chuàng)建組件時(shí)配置這兩個(gè)對(duì)應(yīng)信息時(shí)师枣，他們是作為組件類的屬性，不是組件實(shí)例的屬性萧落，也就是所謂的類的靜態(tài)屬性來(lái)配置的践美。對(duì)應(yīng)上面配置如下：
class TodoItem extends React.Component {
static propTypes = {//類的靜態(tài)屬性
name: React.PropTypes.string
};
static defaultProps = {//類的靜態(tài)屬性
name: ''
};
...
}
組件初始狀態(tài)state的配置不同
React.createClass創(chuàng)建的組件洗贰，其狀態(tài)state是通過(guò)getInitialState方法來(lái)配置組件相關(guān)的狀態(tài)；
React.Component創(chuàng)建的組件陨倡，其狀態(tài)state是在constructor中像初始化組件屬性一樣聲明的敛滋。
const TodoItem = React.createClass({
// return an object
getInitialState(){
return {
isEditing: false
}
}
render(){
return <div></div>
}
})
class TodoItem extends React.Component{
constructor(props){
super(props);
this.state = { // define this.state in constructor
isEditing: false
}
}
render(){
return <div></div>
}
}
Mixins的支持不同
Mixins(混入)是面向?qū)ο缶幊蘋(píng)OP的一種實(shí)現(xiàn)，其作用是為了復(fù)用共有的代碼玫膀，將共有的代碼通過(guò)抽取為一個(gè)對(duì)象矛缨，然后通過(guò)Mixins進(jìn)該對(duì)象來(lái)達(dá)到代碼復(fù)用。具體可以參考React Mixin的前世今生帖旨。
React.createClass在創(chuàng)建組件時(shí)可以使用mixins屬性箕昭，以數(shù)組的形式來(lái)混合類的集合。
var SomeMixin = {
doSomething() {
}
};
const Contacts = React.createClass({
mixins: [SomeMixin],
handleClick() {
this.doSomething(); // use mixin
},
render() {
return (
<div onClick={this.handleClick}></div>
);
}
});
但是遺憾的是React.Component這種形式并不支持Mixins解阅，至今React團(tuán)隊(duì)還沒(méi)有給出一個(gè)該形式下的官方解決方案落竹；但是React開(kāi)發(fā)者社區(qū)提供一個(gè)全新的方式來(lái)取代Mixins,那就是Higher-Order Components，具體細(xì)節(jié)可以參考這篇文章
如何選擇哪種方式創(chuàng)建組件
由于React團(tuán)隊(duì)已經(jīng)聲明React.createClass最終會(huì)被React.Component的類形式所取代货抄。但是在找到Mixins替代方案之前是不會(huì)廢棄掉React.createClass形式述召。所以：
能用React.Component創(chuàng)建的組件的就盡量不用React.createClass形式創(chuàng)建組件。
除此之外蟹地，創(chuàng)建組件的形式選擇還應(yīng)該根據(jù)下面來(lái)決定：
1积暖、只要有可能，盡量使用無(wú)狀態(tài)組件創(chuàng)建形式怪与。
2夺刑、否則（如需要state、生命周期方法等）分别，使用`React.Component`這種es6形式創(chuàng)建組件
補(bǔ)充一點(diǎn)
無(wú)狀態(tài)組件內(nèi)部其實(shí)是可以使用
ref功能的遍愿，雖然不能通過(guò)this.refs訪問(wèn)到，但是可以通過(guò)將ref內(nèi)容保存到無(wú)狀態(tài)組件內(nèi)部的一個(gè)本地變量中獲取到耘斩。
例如下面這段代碼可以使用ref來(lái)獲取組件掛載到dom中后所指向的dom元素：
function TestComp(props){
let ref;
return (<div>
<div ref={(node) => ref = node}>
...
</div>
</div>)
}
