1、getIntialState()方法
這個方法在組件沒有mouting之前調用推掸,在這個方法中可以初始化一些數(shù)據(jù),例如state登渣。這個方法在組件創(chuàng)建的時候調用一次毡泻,之后就不會再被調用了,除非組件銷毀呻顽,重新創(chuàng)建丹墨。
在這個方法中已經可以訪問到this.props了带到。
getDefaultProps()方法
作用于組件類,只調用一次揽惹,返回對象用于設置默認的props,對于引用值狭握,會在實例中共享疯溺。
2囱嫩、componentWillMount()方法
這個方法在組件已經即將創(chuàng)建但是還沒有創(chuàng)建的時候調用,在這里可以用setState修改state今妄。但是react建議是在組件mouted以后調用setState函數(shù)鸳碧,否則容易報警告。這點在介紹state的時候在詳細分析腾仅。
3套利、render方法
這個方法是react組件唯一必需的函數(shù)鹤耍,這個方法用于創(chuàng)建虛擬DOM吹艇。
這個方法里數(shù)據(jù)只能通過this.state和this.props輸出。
要注意一點返回的組件必須有一個頂級的組件昂拂,也就是說所有的標簽必須被一個父標簽包裹受神。
4、componentDidMount()方法
組件真正在被裝載之后格侯,可以修改DOM
這個方法中可以調用Rect.findDOMNode()方法鼻听,訪問Dom節(jié)點(注:在react 0.13版本中用this.getDOMNode()方法而且返回的是虛擬DOM,不能直接訪問DOM節(jié)點)
訪問DOM節(jié)點時联四,react 提供了refs對象撑碴,可以同個refs對象直接訪問到相應的節(jié)點上:
例如:
<div ref='app'></div>
可以通過Rect.findDOMNode(this.refs.app)直接訪問到div節(jié)點
5.componentWillReceiveProps
組件接收到新的props時調用,并將其作為參數(shù)nextProps使用朝墩,此時可以更改組件props及state醉拓。
componentWillReceiveProps: function(nextProps) {
console.log(this.props.color);//原來的顏色
console.log(nextProps.color);//將要變成的顏色
}
6.shouldComponentUpdate
組件是否應當渲染新的props或state,返回false表示跳過后續(xù)的生命周期方法收苏,通常不需要使用以避免出現(xiàn)bug。在出現(xiàn)應用的瓶頸時鹿霸,可通過該方法進行適當?shù)膬?yōu)化排吴。
在首次渲染期間或者調用了forceUpdate方法后,該方法不會被調用
shouldComponentUpdate:function (nextProps,nextState) {
console.log(nextProps,'nextProps');
console.log(nextState,'nextState');
return false;
}
7.componentWillUpdate
接收到新的props或者state后懦鼠,進行渲染之前調用钻哩,此時不允許更新props或state。
8.componentDidUpdate
完成渲染新的props或者state后調用肛冶,此時可以訪問到新的DOM元素街氢。
9.componentWillUnmount
組件被移除之前被調用,可以用于做一些清理工作睦袖,在componentDidMount方法中添加的所有任務都需要在該方法中撤銷阳仔,比如創(chuàng)建的定時器或添加的事件監(jiān)聽器。