實(shí)例化
當(dāng)組件在客戶端被實(shí)例化赃泡,第一次被創(chuàng)建時(shí)续捂,以下方法被調(diào)用:
1. getDefaultProps
只調(diào)用一次,用于設(shè)置 props 的值减余。
2. getInitialState
只調(diào)用一次午笛,用于初始化每個(gè)實(shí)例的 State,在該方法里可以訪問組件的porps鹦肿。
如果使用ES6的語法,可以在構(gòu)造函數(shù)中初始化狀態(tài)
如:constructor (props)
3. componentWillMount
在首次渲染前調(diào)用辅柴,也是在render加載前最后一次修改 state 的機(jī)會(huì)箩溃。
4. render
該方法會(huì)創(chuàng)建一個(gè)虛擬Dom,用來表示組件的輸出
且只能通過 this.state 和 this.props 訪問數(shù)據(jù)
可以返回 null碌嘀、false 或 任何react組件
只能出現(xiàn)一個(gè)頂級(jí)組件涣旨,不能返回一組元素
5. componentDidMount
該組件不會(huì)在服務(wù)端渲染的過程中調(diào)用
調(diào)用時(shí),真實(shí)的Dom已經(jīng)生成
可通過 this.getDOMNode() 或 this.findDOMNode()
示例:
var Area = React.createClass({
render: function(){
this.getDOMNode()
//render調(diào)用時(shí)股冗,組件未掛載霹陡,這里將報(bào)錯(cuò)
return <canvas ref='mainCanvas'>
},
componentDidMount: function(){
var canvas = this.refs.mainCanvas.getDOMNode();
//這是有效的,可以訪問到 Canvas 節(jié)點(diǎn)
}
})
存在期
當(dāng)組件渲染好止状,且用戶已經(jīng)可以進(jìn)行交互(如點(diǎn)烹棉、觸),可改變應(yīng)用狀態(tài)時(shí)怯疤,下面的方法會(huì)被依次調(diào)用
1. componentWillReceiveProps
父組件更改 props 時(shí)被調(diào)用
可在該方法內(nèi)更新State浆洗,而觸發(fā) render 方法重新渲染組件
示例:
componentWillReceiveProps: function (nextProps) {
if (nextProps.checked !== undefined) {
this.setState({
checked: nextProps.checked
})
}
}
2. shouldComponentUpdate
若確定組件的 props 或者 state 的改變不需重新渲染
可用該方法返回 false 來阻止事件的重新渲染
之后便不會(huì)執(zhí)行 render 以及后面的 componentWillMount 和 componentDidUpdate
react.PureComponent 才有該方法
3. componentWillUpdate
和 componentWillMount 類似
組件接受到 props 或者 state 即將重新渲染前
會(huì)對(duì)以下形式方法進(jìn)行調(diào)用
componentWillUpdate(object nextProps, object nextState)
使用此方法時(shí)切勿修改 props 和 state
4. componentDidUpdate
和 componentDidMount 類似
組件將要重新渲染前,會(huì)對(duì)以下形式方法進(jìn)行調(diào)用
componentDidUpdate(object prevProps, object prevState)
在這里可以訪問并修改DOM
銷毀時(shí)
1. componentWillUnmount
每當(dāng) react 用完一個(gè)組件集峦,這個(gè)組件必須從DOM中卸載并銷毀
此時(shí)該方法會(huì)被執(zhí)行辅髓,完成所有的清理和銷毀工作
在 componentDidMount 中添加的任務(wù)都需要在該方法中撤銷
如創(chuàng)建的 定時(shí)器 或事件監(jiān)聽器