react創建組件的三種方式

react創建組件的三種方式：

　　1、函數式無狀態組件

　　2、es5方式React.createClass組件

　　3、es6方式extends React.Component

三種創建方式的異同

    1、函數式無狀態組件

　　（1）語法

1 function myComponent(props) { 
2      return 
3         <div>Hello {props.name}</div> 
4 }

　　（2）特點

　　　　　　● 它是為了創建純展示組件，這種組件只負責根據傳入的props來展示，不涉及到state狀態的操作。

　　　　　　● 組件不能訪問this對象

　　　　　　● 不能訪問生命周期方法

　　（3）建議

　　　　　　如果可能，儘量使用無狀態組件

    2、es5方式React.createClass組件

　　（1）語法

 1 var myCreate = React.createClass({
 2     defaultProps: { 
 3         //code
 4     },
 5     getInitialState: function() {
 6         return {
 7             //code
 8         };
 9     },
10     render: function() {
11         return (
12             <div>
13                 //code
14             </div>
15         );
16     }
17 });

　　（2）特點

　　　　　　這種方式比較陳舊，慢慢會被淘汰。

     3、es6方式extends React.Component

　　（1）語法　　　

class InputControlES6 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            state_exam: 'hello'
        };

        // ES6 類中函數必須手動綁定
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange() {
        this.setState({
            state_exam: 'hello world'
        });
    }

    render() {
        return (
            <div>
                //code
            </div>
        );
    }
};

　　（2）特點

　　　　　　● 成員函數不會自動綁定this，需要開發者手動綁定，否則this不能獲取當前組件實例對象。

　　　　　　● 狀態state是在constructor中像初始化。

　　　　　　● props屬性類型和組件預設屬性作為組件類的屬性，不是組件實例的屬性，所以使用類的靜態屬性配置。