在組件的整個生命週期中,隨着該組件的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