react組件有哪些聲明方式

這篇文章給大家分享的是有關(guān)react組件有哪些聲明方式的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

react組件的聲明方式：1、函數(shù)式定義的無狀態(tài)組件；2、es5原生方式【React.createClass】定義的組件；3、es6形式的【extends React.Component】定義的組件。

react組件的聲明方式：

1、無狀態(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)的組件，通過簡(jiǎn)單組合可以構(gòu)建成其他的組件等；

這種通過多個(gè)簡(jiǎn)單然后合并成一個(gè)大應(yīng)用的設(shè)計(jì)模式被提倡。

無狀態(tài)函數(shù)式組件形式上表現(xiàn)為一個(gè)只帶有一個(gè)render方法的組件類，通過函數(shù)形式或者ES6 箭頭 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)建形式使代碼的可讀性更好，并且減少了大量冗余的代碼，精簡(jiǎn)至只有一個(gè)render方法，大大的增強(qiáng)了編寫一個(gè)組件的便利，除此之外無狀態(tài)組件還有以下幾個(gè)顯著的特點(diǎn)：

• 組件不會(huì)被實(shí)例化，整體渲染性能得到提升

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

• 組件不能訪問this對(duì)象

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

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

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

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

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

2、React.createClass

React.createClass是react剛開始推薦的創(chuàng)建組件的方式，這是ES5的原生的JavaScript來實(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: ''
};

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

React.createClass會(huì)自綁定函數(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)心他們會(huì)被廢棄。HOC可以參考《無狀態(tài)組件(Stateless Component) 與高階組件》。

3、React.Component

React.Component是以ES6的形式來創(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: ''
};

感謝各位的閱讀！關(guān)于react組件有哪些聲明方式就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！