React 組件的生命週期詳解

概念：在組建的建立、到加載到頁面上運行以及組件被銷燬的過程當中，老是伴隨的各類各樣的事件，這些在組件特定時期，出觸發的事件就叫作 組建的聲明週期

組件建立階段：組件建立階段的生命週期函數，有一個顯著地特色，建立階段的生命週期函數，在組建的一生中只執行一次

組件運行階段：也有一個顯著地特色，根據組件的state和props的改變有選擇性的觸發0次或屢次；

組件銷燬階段：也有一個顯著地特色，一生只執行一次

組件初始階段 static defaultProps：初始化props默認值的屬性，做用是防止組件中某些必要的屬性，外界沒有傳遞報錯的問題

組建建立階段 this.state：是用來初始化組件私有數據的，是定義在組建的constructor構造器函數中，因此this.state會被第一時間就被初始化，由於在Class類中，只要new這個類，必然優先調用constructor構造器 componentWillMount：這個函數，是組建的虛擬DOM元素，將要掛在到頁面上的時候執行，此時，虛擬DOM尚未被建立，也沒有被掛在到頁面上；由於虛擬DOM是在render函數上建立的，因此此時根本尚未虛擬DOM被建立 render：當進入到render函數中執行的時候，就已經開始渲染虛擬DOM了，當執行完render後，此時_在內存中已經建立好了，可是，此時虛擬DOM並無被掛在到真正的頁面上_ componentDidMount：表示組件已經完成了掛載，此時，咱們data上的數據，虛擬DOM上的數據以及瀏覽器頁面上的數據保持一致了，到這裏，組件建立階段的生命週期函數已經建立完畢，頁面第一次被渲染好

組件運行階段 componentWillReceiveProps：組件將要接受新的props屬性，只有當外界傳遞給子組件的屬性被修改了，纔會觸發此函數的執行 shouldComponentUpdate：組件是否被更新；狀態(state)或者props的改變都能觸發此組件的更新 componentUpdate：組件將要被更新，此時組件尚未被更新 render：從新渲染內存中虛擬DOM對象，當render完畢以後，虛擬DOM樹已經和組件的state保持一致了，都是最新的了，可是頁面仍是舊的 componentDidUpdate：此時頁面已經更新完了，頁面也是最新的了

組件卸載的過程： componentWillUNmount：組件將要被卸載，此時組件尚可以使用，尚未被卸載；

以上就是react生命週期函數的詳細過程