溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
調用流程可以參看上圖。
React組件提供了生命周期的鉤子函數去響應組件不同時刻的狀態，組件的生命周期如下：
實例化
首次調用組件時，有以下方法會被調用（注意順序，從上到下先后執行）：
getDefaultProps
這個方法是用來設置組件默認的props，組件生命周期只會調用一次。但是只適合react.createClass直接創建的組件，使用ES6/ES7創建的這個方法不可使用，ES6/ES7可以使用下面方式：
//es7
class Component {
static defaultProps = {}
}
//或者也可以在外面定義es6
//Compnent.defaultProps
getInitialState
設置state初始值，在這個方法中你已經可以訪問到this.props。getDefaultProps只適合React.createClass使用。使用ES6初始化state方法如下：
class Component extends React.Component{
constructor(){
this.state = {
render: true,
}
}
componentWillMount
改方法會在組件首次渲染之前調用，這個是在render方法調用前可修改state的最后一次機會。這個方法很少用到。
render
這個方法以后大家都應該會很熟悉，JSX通過這里，解析成對應的虛擬DOM，渲染成最終效果。格式大致如下：
class Component extends React.Component{
render(){
return (
<div></div>
)
}
componentDidMount
這個方法在首次真實的DOM渲染后調用（僅此一次）當我們需要訪問真實的DOM時，這個方法就經常用到。如何訪問真實的DOM這里就不想說了。當我們需要請求外部接口數據，一般都在這里處理。
存在期
實例化后，當props或者state發生變化時，下面方法依次被調用：
componentWillReceiveProps
每當我們通過父組件更新子組件props時（這個也是唯一途徑），這個方法就會被調用。
componentWillReceiveProps(nextProps){}
shouldComponentUpdate
字面意思，是否應該更新組件，默認返回true。當返回false時，后期函數就不會調用，組件不會在次渲染。
shouldComponentUpdate(nextProps,nextState){}
componentWillUpdate
字面意思組件將會更新，props和state改變后必調用。
render
跟實例化時的render一樣，不多說
componentDidUpdate
這個方法在更新真實的DOM成功后調用，當我們需要訪問真實的DOM時，這個方法就也經常用到。
銷毀期
銷毀階段，只有一個函數被調用：
componentWillUnmount
每當組件使用完成，這個組件就必須從DOM中銷毀，此時該方法就會被調用。當我們在組件中使用了setInterval，那我們就需要在這個方法中調用clearTimeout。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
