站長資訊網
聲明react組件的方式有3種：1、利用函數式定義無狀態組件；2、利用 “React.createClass()”方法來定義組件；2、利用“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: '' };
與無狀態組件相比，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: '' };
推薦學習：《react視頻教程》
