React：組件的生命週期

在組件的整個生命週期中，隨着該組件的props或者state發生改變，其DOM表現也會有相應的變化。一個組件就是一個狀態機，對於特定地輸入，它總返回一致的輸出。

一個React組件的生命週期分爲三個部分：實例化、存在期和銷燬時。

實例化

當組件在客戶端被實例化，第一次被創建時，以下方法依次被調用：

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
5、componentDidMount

當組件在服務端被實例化，首次被創建時，以下方法依次被調用：

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render

componentDidMount 不會在服務端被渲染的過程中調用。

getDefaultProps

對於每個組件實例來講，這個方法只會調用一次，該組件類的所有後續應用，getDefaultPops 將不會再被調用，其返回的對象可以用於設置默認的 props(properties的縮寫) 值。

var Hello = React.creatClass({
getDefaultProps: function(){
return {
name: ‘pomy’,
git: ‘dwqs’
}
},

render: function(){
    return (
        <div>Hello,{this.props.name},git username is {this.props.dwqs}</div>
    )
}

});

ReactDOM.render(, document.body);
也可以在掛載組件的時候設置 props：

var data = [{title: ‘Hello’}];

或者調用 setProps （一般不需要調用）來設置其 props：

var data = [{title: ‘Hello’}];
var Hello = React.render(, document.body);
Hello.setProps({data:data});
但只能在子組件或組件樹上調用 setProps。別調用 this.setProps 或者 直接修改 this.props。將其當做只讀數據。

React通過 propTypes 提供了一種驗證 props 的方式，propTypes 是一個配置對象，用於定義屬性類型：

var survey = React.createClass({
propTypes: {
survey: React.PropTypes.shape({
id: React.PropTypes.number.isRequired
}).isRequired,
onClick: React.PropTypes.func,
name: React.PropTypes.string,
score: React.PropTypes.array
…
},

//...

})
組件初始化時，如果傳遞的屬性和 propTypes 不匹配，則會打印一個 console.warn 日誌。如果是可選配置，可以去掉.isRequired。常用的 PropTypes 如下：

PropTypes

getInitialState

對於組件的每個實例來說，這個方法的調用有且只有一次，用來初始化每個實例的 state，在這個方法裏，可以訪問組件的 props。每一個React組件都有自己的 state，其與 props 的區別在於 state只存在組件的內部，props 在所有實例中共享。

getInitialState 和 getDefaultPops 的調用是有區別的，getDefaultPops 是對於組件類來說只調用一次，後續該類的應用都不會被調用，而 getInitialState 是對於每個組件實例來講都會調用，並且只調一次。

var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? ‘like’ : ‘haven\’t liked’;
return (

You {text} this. Click to toggle.

);
}
});

ReactDOM.render(
,
document.getElementById(‘example’)
);
每次修改 state，都會重新渲染組件，實例化後通過 state 更新組件，會依次調用下列方法：

1、shouldComponentUpdate
2、conponentWillUpdate
3、render
4、conponentDidUpdate

但是不要直接修改 this.state，要通過 this.setState 方法來修改。

componentWillMount

在首次渲染執行前立即調用且僅調用一次。如果在這個方法內部調用 setState 並不會觸發重新渲染，這也是在 render 方法調用之前修改 state 的最後一次機會。

render

該方法會創建一個虛擬DOM，用來表示組件的輸出。對於一個組件來講，render方法是唯一一個必需的方法。render方法需要滿足下面幾點：

只能通過 this.props 和 this.state 訪問數據（不能修改）
可以返回 null,false 或者任何React組件
只能出現一個頂級組件，不能返回一組元素
不能改變組件的狀態
不能修改DOM的輸出
render方法返回的結果並不是真正的DOM元素，而是一個虛擬的表現，類似於一個DOM tree的結構的對象。react之所以效率高，就是這個原因。

componentDidMount

該方法不會在服務端被渲染的過程中調用。該方法被調用時，已經渲染出真實的 DOM，可以再該方法中通過 this.getDOMNode() 訪問到真實的 DOM(推薦使用 ReactDOM.findDOMNode())。

var data = [..];
var comp = React.createClass({
render: function(){
return