調(diào)用流程可以參看上圖。

React組件提供了生命周期的鉤子函數(shù)去響應(yīng)組件不同時(shí)刻的狀態(tài)，組件的生命周期如下：

1. 實(shí)例化
2. 存在期
3. 銷毀期

實(shí)例化

首次調(diào)用組件時(shí)，有以下方法會(huì)被調(diào)用（注意順序，從上到下先后執(zhí)行）：

getDefaultProps

這個(gè)方法是用來(lái)設(shè)置組件默認(rèn)的props，組件生命周期只會(huì)調(diào)用一次。但是只適合react.createClass直接創(chuàng)建的組件，使用ES6/ES7創(chuàng)建的這個(gè)方法不可使用，ES6/ES7可以使用下面方式：

//es7
class Component {
 static defaultProps = {}
}
//或者也可以在外面定義es6
//Compnent.defaultProps

getInitialState

設(shè)置state初始值，在這個(gè)方法中你已經(jīng)可以訪問(wèn)到this.props。getDefaultProps只適合React.createClass使用。使用ES6初始化state方法如下：

class Component extends React.Component{
 constructor(){
 this.state = {
  render: true,
 }
 }

componentWillMount

改方法會(huì)在組件首次渲染之前調(diào)用，這個(gè)是在render方法調(diào)用前可修改state的最后一次機(jī)會(huì)。這個(gè)方法很少用到。

render

這個(gè)方法以后大家都應(yīng)該會(huì)很熟悉，JSX通過(guò)這里，解析成對(duì)應(yīng)的虛擬DOM，渲染成最終效果。格式大致如下：

class Component extends React.Component{
 render(){
 return (
  <div></div>
 )
 }

componentDidMount

這個(gè)方法在首次真實(shí)的DOM渲染后調(diào)用（僅此一次）當(dāng)我們需要訪問(wèn)真實(shí)的DOM時(shí)，這個(gè)方法就經(jīng)常用到。如何訪問(wèn)真實(shí)的DOM這里就不想說(shuō)了。當(dāng)我們需要請(qǐng)求外部接口數(shù)據(jù)，一般都在這里處理。

存在期

實(shí)例化后，當(dāng)props或者state發(fā)生變化時(shí)，下面方法依次被調(diào)用：

componentWillReceiveProps

每當(dāng)我們通過(guò)父組件更新子組件props時(shí)（這個(gè)也是唯一途徑），這個(gè)方法就會(huì)被調(diào)用。

componentWillReceiveProps(nextProps){}

shouldComponentUpdate

字面意思，是否應(yīng)該更新組件，默認(rèn)返回true。當(dāng)返回false時(shí)，后期函數(shù)就不會(huì)調(diào)用，組件不會(huì)在次渲染。

shouldComponentUpdate(nextProps,nextState){}

componentWillUpdate

字面意思組件將會(huì)更新，props和state改變后必調(diào)用。

render

跟實(shí)例化時(shí)的render一樣，不多說(shuō)

componentDidUpdate

這個(gè)方法在更新真實(shí)的DOM成功后調(diào)用，當(dāng)我們需要訪問(wèn)真實(shí)的DOM時(shí)，這個(gè)方法就也經(jīng)常用到。

銷毀期

銷毀階段，只有一個(gè)函數(shù)被調(diào)用：

componentWillUnmount

每當(dāng)組件使用完成，這個(gè)組件就必須從DOM中銷毀，此時(shí)該方法就會(huì)被調(diào)用。當(dāng)我們?cè)诮M件中使用了setInterval，那我們就需要在這個(gè)方法中調(diào)用clearTimeout。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論