React：組件的生命周期

生命周期回調(diào)函數(shù)

var Card=React.createClass({
  getDefaultProps:function(){
    return {
      title:'頭部',
      content:'內(nèi)容區(qū)'
    }
  },
  render:function(){
    return (
      <div><p>{this.props.title}</p><p>{this.props.content}</p></div>
    )
  }
});
ReactDOM.render(
  <Card/>,
  document.body
);

var MyButton=React.createClass({
  getInitialState:function(){
    return {isFriend:false}
  },
  handleClick:function(event){
    this.setState({isFriend:!this.state.isFriend});
  },
  render:function(){
    var friend=this.state.isFriend ? '添加好友' : '刪除好友';
    return (
      <div>
        <button onClick={this.handleClick}>{friend}</button>
      </div>
    );
  }
});

ReactDOM.render(
  <MyButton/>,
  document.body
);

componentWillMount

該方法會(huì)在完成渲染之前被調(diào)用，這也是在render方法調(diào)用前可以修改state的最后一次機(jī)會(huì)。

render

該方法會(huì)創(chuàng)建一個(gè)虛擬DOM，用來(lái)表示組件的輸出。對(duì)于一個(gè)組件來(lái)說(shuō)，render是唯一一個(gè)必需的方法，并且有特定的規(guī)則。render方法需要滿足下面幾點(diǎn)：

• 只能通過(guò) this.props 和 this.state 訪問(wèn)數(shù)據(jù)。
• 可以返回null、false或者任何React組件。
• 只能出現(xiàn)一個(gè)頂級(jí)組件（不能返回一組元素）。
• 必需純凈，意味著不能改變組件的狀態(tài)或者修改DOM的輸出。

componentDidMount

在render方法成功調(diào)用并且真實(shí)的DOM已經(jīng)被渲染，你可以在這個(gè)方法內(nèi)部通過(guò) this.getDOMNode() 方法訪問(wèn)到它。

2.存在期

這個(gè)階段，組件已經(jīng)渲染好并且用戶可以與它進(jìn)行交互。通常是通過(guò)一次鼠標(biāo)點(diǎn)擊、手指點(diǎn)按或鍵盤(pán)事件來(lái)觸發(fā)一個(gè)事件處理器。

componentWillReceiveProps

在任何時(shí)刻，組件的props都可以通過(guò)父輩組件來(lái)更改。這時(shí)，這個(gè)方法會(huì)被調(diào)用，我們也將獲得更改props對(duì)象及更新state的機(jī)會(huì)。

shouldComponentUpdate

如果你確定某個(gè)組件或其任何子組件不需要渲染新的props或state，可以通過(guò)在這個(gè)方法里通過(guò)返回 false 來(lái)阻止組件的重新渲染，返回 false 則不會(huì)執(zhí)行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。

該方法是非必需的，并且大多數(shù)情況下沒(méi)必要在開(kāi)發(fā)中使用。

componentWillUpdate

和componentWillMount方法類(lèi)似，組件會(huì)在接收到新的props或state進(jìn)行渲染之前，調(diào)用此方法。

注意：不可以在該方法中更新state或props，而應(yīng)該借助 componentWillReceiveProps 方法在運(yùn)行時(shí)更新state。

componentDidUpdate

這個(gè)方法和 componentDidMount 類(lèi)似，在組件重新被渲染之后，此方法會(huì)被調(diào)用?？梢栽谶@里訪問(wèn)并修改 DOM。

3.銷(xiāo)毀&清理期

在此階段，只有一個(gè)方法會(huì)被調(diào)用，完成所有的清理和銷(xiāo)毀工作。

componentWillUnmount

每當(dāng)React使用完一個(gè)組件，這個(gè)組件必須從 DOM 中卸載后被銷(xiāo)毀，此時(shí) componentWillUnmout 會(huì)被執(zhí)行，完成所有的清理和銷(xiāo)毀工作，在 conponentDidMount 中添加的任務(wù)都需要再該方法中撤銷(xiāo)，如創(chuàng)建的定時(shí)器或事件監(jiān)聽(tīng)器。

總結(jié)

React生命周期方法提供了精心設(shè)計(jì)的鉤子函數(shù)，會(huì)伴隨組件的整個(gè)生命周期。和狀態(tài)機(jī)類(lèi)型，每個(gè)組件都被設(shè)計(jì)成了能夠在整個(gè)生命周期中輸出穩(wěn)定、語(yǔ)義化的標(biāo)簽。