無狀態函數式組件
創建純展示組件，只負責根據傳入的props來展示，不涉及到要state狀態的操作，是一個只帶有一個render方法的組件類
創建形式如下：
function HelloComponent(props) {
return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="yourName" />, mountNode)
特點：
- 組件不會被實例化，整體渲染性能得到提升
- 組件不能訪問
this對象 - 組件無法訪問生命周期的方法
- 無狀態組件只能訪問輸入的
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獲取到它的值
特點：
- React.createClass會自綁定函數方法導致不必要的性能開銷
- React.createClass的mixins不夠自然、直觀
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的方法
- 在構造函數中綁定
constructor(props) {
super(props);
this.Enter = this.Enter.bind(this);
}
- 使用bind綁定
<div onKeyUp={this.Enter.bind(this)}></div>
- 使用arrow function綁定
<div onKeyUp={(event)=>this.Enter(event)}></div>
我們在實際應用中應該選擇哪種方法來創建組件呢？
- 只要有可能，盡量使用無狀態組件創建形式
- 否則（如需要state、生命周期方法等），使用
React.Component這種es6形式創建組件
