React 組件的生命週期API和事件處理

標籤：

一、簡單記錄React的組件的簡潔的生命週期API：

 

A：執行個體化期：

一個執行個體第一次被建立時所調用的API與其它後續執行個體被建立時所調用的API略有不同。

執行個體第一次被建立時會調用getDefaultProps，而後續執行個體建立時不會調用這個方法。

執行個體被建立時，依次被調用的API有：

getDefaultProps：

執行個體第一次被建立時才調用，對於組件類來說，它只調用一次。

這個方法返回的對象可為執行個體設定預設的props值。

getInitialState：

對於每個執行個體來說，這個方法只調用一次。每次建立執行個體時執行一次。

在這裡初始化每個執行個體的state，在這裡可以訪問到this.props。

componentWillMount：

在首次渲染之前被調用，在渲染之前更改組件state的最後機會。

render：

組件的唯一必需方法。建立虛擬DOM，表示組件輸出。

只能通過this.props和this.state訪問資料。

可以return null，return false，或return 任何React組件。

只能有一個頂級組件。

不能改變組件狀態，或修改DOM的輸出。

（注，render返回的結果說虛擬DOM，React隨後會把它和真實DOM做對比，來判斷是否有必要做出修改）

componentDidMount：

render成功調用並且真實DOM也已經被渲染後，這個方法會調用。

在這裡可以通過this.getDOMNode()方法訪問真實的DOM。

例如需要測量DOM元素的寬度和高度等屬性，可以在這個方法裡做。

（注，React跑在Server端時，componentDidMount不會被調用）

 

B：存在期：

隨著應用狀態的改變，以下API依次被調用：

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

 

C：銷毀期：

組件被用完後，以下API被調用，給執行個體清理自身：

componentWillUnmount

 

注意反模式：

在getInitialState方法裡，通過this.props來建立state的方法是一種反模式！

React專註於維護資料的單一來源，當組件的state值和它所基於的prop不同步時，是一種反模式！

反模式例子：

getDefaultProps: function() {

　　return { date: new Date() }

};

getInitialState: function() {

　　return {

　　　　day: this.props.date.getDay()   // 不要在這裡計算

　　}

};

render: function() {

　　return <div>Day is: {this.state.day}</div>;

};

 

正確的模式應該是在渲染時計算：（保證計算後的值不會與派生出它的props值不同步）

getDefaultProps: function() {

　　return { date: new Date() }

};

render: function() {

　　var day = this.props.date.getDay();  // 在渲染時做計算是正確的

　　return <div>Day is: {day}</div>;

};

 

注意，組件可以用this.props訪問props，但不能修改自己的props！

 

關於state：

每個組件都有自己的state。state和props區別在於state只存在於組件內部。

state用來確定一個元素的檢視狀態。

state可以用setState或replaceState來修改。（不能用this.state來修改state）

只要setState或replaceState被調用，render就會被調用。如果render傳回值有變化，DOM就會被更新。

 

二、React的事件處理：

事件文檔：http://facebook.github.io/react/docs/events.html

綁定一個事件處理器：

React.DOM.button({className:"btn", onClick: this.handleSendClick}, "Send");

觸控事件需要調用這個方法來手動啟動：React.initializeTouchEvents(true);

更新群組件狀態會觸發組件重繪。

setState會更新某一個state屬性，而replaceState會替換掉整個state對象。

在綁定的事件處理器裡做setState：

getInitialState: function() {

　　return { title: "Title 1.0" }

};

handlePageOnload: function(ev) {

　　this.setState({title: "Title 2.0"});

　　ev.preventDefault(); // 非必需，視情況而定

};

小結：更改state只能用setState或replaceState，因為它們可以通知React重繪DOM，即調用render方法。

 

補充：關於處理input的onChange事件：

handleComplete: function(event) {

　　this.callMethodOnProps("onCompleted", event.target.value);

};

render: function() {

　　return <textarea onBlur="{this.handleComplete}"></textarea>

};

注意，使用event.target.value擷取input值是一種常規方法。

 

React 組件的生命週期API和事件處理