從事服務器主機托管，服務器租用，云主機，雅安服務器托管，域名注冊，CDN，網(wǎng)絡代維等服務。

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

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

1. 實例化
2. 存在期
3. 銷毀期

實例化

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

getDefaultProps

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

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

getInitialState

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

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

componentWillMount

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

render

這個方法以后大家都應該會很熟悉，JSX通過這里，解析成對應的虛擬DOM，渲染成最終效果。格式大致如下：

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

componentDidMount

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

存在期

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

componentWillReceiveProps

每當我們通過父組件更新子組件props時（這個也是唯一途徑），這個方法就會被調(diào)用。

componentWillReceiveProps(nextProps){}

shouldComponentUpdate

字面意思，是否應該更新組件，默認返回true。當返回false時，后期函數(shù)就不會調(diào)用，組件不會在次渲染。

shouldComponentUpdate(nextProps,nextState){}

componentWillUpdate

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

render

跟實例化時的render一樣，不多說

componentDidUpdate

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

銷毀期

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

componentWillUnmount

每當組件使用完成，這個組件就必須從DOM中銷毀，此時該方法就會被調(diào)用。當我們在組件中使用了setInterval，那我們就需要在這個方法中調(diào)用clearTimeout。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

標題名稱：React組件生命周期詳解
分享URL：http://jinyejixie.com/article20/ijgcjo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作、動態(tài)網(wǎng)站、全網(wǎng)營銷推廣、云服務器、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)