關于React創(chuàng)建組件的三種方式及其區(qū)別

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

雖然有三種方式可以定義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 <p>Hello {props.name}</p>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

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

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

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

2.組件不能訪問this對象

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

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

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

4.無狀態(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 (
 <p>
 Type something:
 <input onChange={this.handleChange} value={this.state.text} />
 </p>
 );
 }
});
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: ''
};

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

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 (
 <p>
 Type something:
 <input onChange={this.handleChange}
 value={this.state.text} />
 </p>
 );
 }
}
InputControlES6.propTypes = {
 initialValue: React.PropTypes.string
};
InputControlES6.defaultProps = {
 initialValue: ''
};

React.createClass與React.Component區(qū)別

根據(jù)上面展示代碼中二者定義組件的語法格式不同之外，二者還有很多重要的區(qū)別，下面就描述一下二者的主要區(qū)別。

函數(shù)this自綁定

React.createClass創(chuàng)建的組件，其每一個成員函數(shù)的this都有React自動綁定，任何時候使用，直接使用this.method即可，函數(shù)中的this會被正確設置。

const Contacts = React.createClass({ 
 handleClick() {
 console.log(this); // React Component instance
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

React.Component創(chuàng)建的組件，其成員函數(shù)不會自動綁定this，需要開發(fā)者手動綁定，否則this不能獲取當前組件實例對象。

class Contacts extends React.Component { 
 constructor(props) {
 super(props);
 }
 handleClick() {
 console.log(this); // null
 }
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }

當然，React.Component有三種手動綁定方法：可以在構造函數(shù)中完成綁定，也可以在調(diào)用時使用method.bind(this)來完成綁定，還可以使用arrow function來綁定。拿上例的handleClick函數(shù)來說，其綁定可以有：

 constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this); //構造函數(shù)中綁定
 }

<p onClick={this.handleClick.bind(this)}></p> //使用bind來綁定
 <p onClick={()=>this.handleClick()}></p> //使用arrow function來綁定

組件屬性類型propTypes及其默認props屬性defaultProps配置不同

React.createClass在創(chuàng)建組件時，有關組件props的屬性類型及組件默認的屬性會作為組件實例的屬性來配置，其中defaultProps是使用getDefaultProps的方法來獲取默認組件屬性的

const TodoItem = React.createClass({
 propTypes: { // as an object
 name: React.PropTypes.string
 },
 getDefaultProps(){ // return a object
 return {
 name: '' 
 }
 }
 render(){
 return <p></p>
 }
})

React.Component在創(chuàng)建組件時配置這兩個對應信息時，他們是作為組件類的屬性，不是組件實例的屬性，也就是所謂的類的靜態(tài)屬性來配置的。對應上面配置如下：

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是通過getInitialState方法來配置組件相關的狀態(tài)；

React.Component創(chuàng)建的組件，其狀態(tài)state是在constructor中像初始化組件屬性一樣聲明的。

const TodoItem = React.createClass({
 // return an object
 getInitialState(){ 
 return {
 isEditing: false
 }
 }
 render(){
 return <p></p>
 }
})

class TodoItem extends React.Component{
 constructor(props){
 super(props);
 this.state = { // define this.state in constructor
 isEditing: false
 } 
 }
 render(){
 return <p></p>
 }
}

Mixins的支持不同

Mixins(混入)是面向?qū)ο缶幊蘋OP的一種實現(xiàn)，其作用是為了復用共有的代碼，將共有的代碼通過抽取為一個對象，然后通過Mixins進該對象來達到代碼復用。

React.createClass在創(chuàng)建組件時可以使用mixins屬性，以數(shù)組的形式來混合類的集合。

var SomeMixin = { 
 doSomething() {
 }
};
const Contacts = React.createClass({ 
 mixins: [SomeMixin],
 handleClick() {
 this.doSomething(); // use mixin
 },
 render() {
 return (
 <p onClick={this.handleClick}></p>
 );
 }
});

但是遺憾的是React.Component這種形式并不支持Mixins，至今React團隊還沒有給出一個該形式下的官方解決方案；但是React開發(fā)者社區(qū)提供一個全新的方式來取代Mixins,那就是Higher-Order Components。

如何選擇哪種方式創(chuàng)建組件

由于React團隊已經(jīng)聲明React.createClass最終會被React.Component的類形式所取代。但是在找到Mixins替代方案之前是不會廢棄掉React.createClass形式。所以：

能用React.Component創(chuàng)建的組件的就盡量不用React.createClass形式創(chuàng)建組件。

除此之外，創(chuàng)建組件的形式選擇還應該根據(jù)下面來決定：

1、只要有可能，盡量使用無狀態(tài)組件創(chuàng)建形式。

2、否則（如需要state、生命周期方法、ref等），使用`React.Component`這種es6形式創(chuàng)建組件

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com