React創建組件的3種寫法

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

函數式定義的無狀態組件
es5原生方式React.createClass定義的組件
es6形式的extends React.Component定義的組件

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

 

（1）無狀態函數式組件

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

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

　　無狀態函數式組件形式上表現為一個只帶有一個render方法的組件類，通過函數形式或者ES6 arrow function的形式在創建，並且該組件是無state狀態的。具體的創建形式如下：案例如下：

　　

無狀態函數式組件，顧名思義，無狀態，也就是你無法使用State，也無法使用組件的生命周期方法，這就決定了函數組件都是展示性組件，接收Props，渲染DOM，而不關注其他邏輯。

其實無狀態函數式組件也是官方比較推薦的一種方式，盡量讓底層的組件變成無狀態函數式組件，也即組件盡量只用來顯示數據，把數據操作的邏輯都放在頂層，然后從頂層把數據傳到底層

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

1、組件不會被實例化，整體渲染性能得到提升
　　因為組件被精簡成一個render方法的函數來實現的，由於是無狀態組件，所以無狀態組件就不會在有組件實例化的過程，無實例化過程也就不需要分配多余的內存，從而性能得到一定的提升。
2、組件不能訪問this對象
　　無狀態組件由於沒有實例化過程，所以無法訪問組件this中的對象，例如：this.ref、this.state等均不能訪問。若想訪問就不能使用這種形式來創建組件
3、組件無法訪問生命周期的方法
　　因為無狀態組件是不需要組件生命周期管理和狀態管理，所以底層實現這種形式的組件時是不會實現組件的生命周期方法。所以無狀態組件是不能參與組件的各個生命周期管理的。
4、無狀態組件只能訪問輸入的props，同樣的props會得到同樣的渲染結果，不會有副作用

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

　　

 

 

 

 

（2）React.createClass

`React.createClass`是react剛開始推薦的創建組件的方式，這是ES5的原生的JavaScript來實現的React組件，其形式如下：

　　案例代碼：

　　

 

 　　案例2：

var InputControlES5 = React.createClass({
    propTypes: {//定義傳入props中的屬性各種類型
        initialValue: React.PropTypes.string
    },
    defaultProps: { //組件默認的props對象
        initialValue: ''
    },
    // 設置 initial state
    getInitialState: function() {//組件相關的狀態對象
        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: ''
};　　

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

• React.createClass會自綁定函數方法（不像React.Component只綁定需要關心的函數）導致不必要的性能開銷，增加代碼過時的可能性。
• React.createClass的mixins不夠自然、直觀；React.Component形式非常適合高階組件（Higher Order Components--HOC）,它以更直觀的形式展示了比mixins更強大的功能，並且HOC是純凈的JavaScript，不用擔心他們會被廢棄。HOC可以參考無狀態組件(Stateless Component) 與高階組件。

 

（3）ES6寫法React.Component

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

class InputControlES6 extends React.Component {
    constructor(props) {
        super(props);

        // 設置 initial state
        this.state = {
            text: props.initialValue || 'placeholder'
        };

        // ES6 類中函數必須手動綁定
        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: ''
};

　　

 

 

 

 

 

 

.