前言

當我們談起React的時候，多半會將注意力集中在組件之上，思考如何將頁面劃分成一個個組件，以及如何編寫可復用的組件。但對于接觸React不久，還沒有真正用它做一個完整項目的人來說，理解如何創建一個組件也并不那么簡單。

在最開始的時候我以為創建組件只需要調用createClass這個api就可以了；但學習了ES6的語法后，又知道了可以利用繼承，通過extends React.component來創建組件；后來在閱讀別人代碼的時候又發現了PureComponent以及完全沒有繼承，僅僅通過返回JSX語句的方式創建組件的方式。

下面這篇文章，就將逐一介紹這幾種創建組件的方法，分析其特點，以及如何選擇使用哪一種方式創建組件。

幾種方法

1.createClass

如果你還沒有使用ES6語法，那么定義組件，只能使用React.createClass這個helper來創建組件，下面是一段示例：

var React = require("react");var Greeting = React.createClass({propTypes: {name: React.PropTypes.string //屬性校驗},getDefaultProps: function() {return {name: 'Mary' //默認屬性值};},getInitialState: function() {return {count: this.props.initialCount}; //初始化state},handleClick: function() {//用戶點擊事件的處理函數},render: function() {return <h1>Hello, {this.props.name}</h1>;}});module.exports = Greeting;

這段代碼，包含了組件的幾個關鍵組成部分，這種方式下，組件的props、state等都是以對象屬性的方式組合在一起，其中默認屬props和初始state都是返回對象的函數，propTypes則是個對象。這里還有一個值得注意的事情是，在createClass中，React對屬性中的所有函數都進行了this綁定，也就是如上面的hanleClick其實相當于handleClick.bind(this) 。

2.component

因為ES6對類和繼承有語法級別的支持，所以用ES6創建組件的方式更加優雅，下面是示例：

import React from 'react';class Greeting extends React.Component {constructor(props) {super(props);this.state = {count: props.initialCount};this.handleClick = this.handleClick.bind(this);}//static defaultProps = {// name: 'Mary' //定義defaultprops的另一種方式//}//static propTypes = {//name: React.PropTypes.string//}handleClick() {//點擊事件的處理函數}render() {return <h1>Hello, {this.props.name}</h1>;}}Greeting.propTypes = {name: React.PropTypes.string};Greeting.defaultProps = {name: 'Mary'};export default Greating;

可以看到Greeting繼承自React.component,在構造函數中，通過super()來調用父類的構造函數，同時我們看到組件的state是通過在構造函數中對this.state進行賦值實現，而組件的props是在類Greeting上創建的屬性，如果你對類的屬性和對象的屬性的區別有所了解的話，大概能理解為什么會這么做。