聲明react組件的方式有幾種

宣告react元件的方式有3種：1、利用函數式定義無狀態元件；2、利用“React.createClass()”方法定義元件；3、利用“React.Component()”方法以ES6的形式來定義組件。

本教學操作環境：Windows7系統、react17.0.1版、Dell G3電腦。

react宣告（建立）元件的方式：

#React推出後，出於不同的原因先後出現三種定義react元件的方式，殊途同歸;

具體的三種方式：

• 函數式定義無狀態元件

• React.createClass( )定義元件

• React.Component()定義元件

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

無狀態函數式元件

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

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

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

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

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

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

• 元件不會被實例化，整體渲染性能得到提升

  因為組件被精簡成一個render方法的函數來實現的，由於是無狀態組件，所以無狀態組件就不會在有組件實例化的過程，無實例化過程也就不需要分配多餘的內存，從而性能得到一定的提升。

• 元件不能存取this物件

  無狀態元件由於沒有實例化過程，所以無法存取元件this中的對象，例如：this.ref、this.state等均不能訪問。若想存取就不能使用這種形式來建立元件

• 元件無法存取生命週期的方法

  因為無狀態元件是不需要元件生命週期管理和狀態管理，所以底層實現這種形式的元件時是不會實現元件的生命週期方法。所以無狀態組件是不能參與組件的各個生命週期管理的。

• 無狀態元件只能存取輸入的props，同樣的props會得到同樣的渲染結果，不會有副作用

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

React.createClass

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

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: &#39;&#39;
};

與無狀態元件相比，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) 與高階組件》。

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: &#39;&#39;
};

推荐学习：《react视频教程》

以上是聲明react組件的方式有幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章！