無狀態函式式元件

建立純展示元件，只負責根據傳入的props 來展示，不涉及到要state 狀態的操作，是一個只帶有一個render 方法的元件類
建立形式如下：

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

特點：
1，元件不會被例項化，整體渲染效能得到提升。
2，元件不能訪問this物件。
3，元件無法訪問生命週期的方法。
4，無狀態元件只能訪問輸入的props ，同樣的props會得到同樣的渲染結果，不會有副作用。

無狀態元件使得程式碼結構更加清晰，減少程式碼冗餘，在開發過程中，儘量使用無狀態元件。

React.createClass

是ES5 的原生的javascript 來實現的react 元件
該栗子實現了一個互動列表，使用者輸入資訊，按回車後觸發鍵盤事件將獲取到的輸入值渲染生成列表，輸入資訊的數量可以是任意多個

具體形式如下

var Greeting = React.createClass({
    getInitialState: function () {
        return {
            work_list: []
        };
    },
    render: function () {
        return (
            <div>
                <input type="text" ref="myWork" placeholder="What need to be done?" onKeyUp={this.Enter}/>
                <ul>
                    {
                        this.state.work_list.map(function (textValue) {
                            return <li key={textValue}>{textValue}</li>;
                        })
                    }
                </ul>
            </div>
        );
    },
    Enter: function (event) {
        var works = this.state.work_list;
        var work = this.refs.myWork.value;
        if (event.keyCode == 13) {
            works.push(work);
            this.setState({work_list: works});
            this.refs.myWork.value = "";
        }
    }
});
 

給文字框增加onKeyUp 監聽鍵盤事件

元件在插入頁面前其實是在虛擬DOM 中的表示，因此，在渲染成最終實際的DOM 前，不能通過直接訪問元件內的元素來獲取他的屬性。文字輸入框用於獲取使用者的輸入。這時就必須獲取真實的DOM節點，虛擬DOM是拿不到使用者輸入的。為了做到這一點，我們在文字輸入框添加了一個ref 屬性 myWork ,然後通過this.refs.myWork 就指向了這個虛擬DOM 的子節點，這樣就可以通過this.refs.myWork.value 獲取到他的值

特點：
1，React.createClass 會自動繫結函式方法導致不必要的效能開銷。
2，React.createClass 的

**

React.Component

**
React.Component 是以ES6 的形式來建立React 的元件的，是React目前最為推薦的建立有狀態元件的方式，相對於React.createClass 可以更好實現程式碼服用。將上邊React.createClass 的形式改為React.Component 形式如下：

class Greeting extends React.Component{
   constructor (props) {
       super(props);
       this.state={
            work_list: []
        }

        this.Enter=this.Enter.bind(this); //繫結this
    }
    render() {
        return (
            <div>
                <input type="text" ref="myWork" placeholder="What need to be done?" onKeyUp={this.Enter}/>
                <ul>
                    {
                        this.state.work_list.map(function (textValue) {
                            return <li key={textValue}>{textValue}</li>;
                        })
                    }
                </ul>
            </div>
        );
    }
    Enter(event) {
        var works = this.state.work_list;
        var work = this.refs.myWork.value;
        if (event.keyCode == 13) {
            works.push(work);
            this.setState({work_list: works});
            this.refs.myWork.value = "";
        }
    }
}

關於this
React.createClass 建立的元件，其每一個成員函式的this 都有React 自動繫結，任何時候使用，直接使用this.method即可，函式中的this會被正確設定

React.Component 建立的元件，其成員函式不會自動繫結this， 需要手動繫結，否則this 不能獲取當前元件例項物件

React.Component 三種手動繫結this 的方法
1，在建構函式中繫結

constructor(props) {
       super(props);
       this.Enter = this.Enter.bind(this);
  }

2，使用bind繫結

    <div onKeyUp={this.Enter.bind(this)}></div> 

3，使用arrow function 繫結

    <div onKeyUp={(event)=>this.Enter(event)}></div> 

我們在實際應用中應該選擇哪種方法來建立元件呢？
1，只要有可能，儘量使用無狀態元件建立形式。
2，否則（如需要state，生命週期方法等），使用React.Component 這種es6 形式建立元件