1.React生命周期

這張圖可以看到React生命周期的四大階段

Initalization:初始化階段
Mounting:掛載階段
Updation:更新階段
Unmounting:銷毀階段

2.什么是生命周期函數？

生命周期函數指在某一時刻組件會自動調用執(zhí)行的函數

render()函數，就是一個生命周期函數，它在state發(fā)生改變時自動執(zhí)行。這就是一個標準的自動執(zhí)行函數。

constructor不算生命周期函數。

constructor我們叫構造函數，它是ES6的基本語法。雖然它和生命周期函數的性質一樣，但不能認為是生命周期函數。

但是你要心里把它當成一個生命周期函數，我個人把它看成React的Initialization階段，定義屬性（props）和狀態(tài)(state)。

3.Mounting階段

Mounting階段叫掛載階段，伴隨著整個虛擬DOM的生成，它里邊有三個小的生命周期函數，分別是：

componentWillMount: 在組件即將被掛載到頁面的時刻執(zhí)行。
render: 頁面state或props發(fā)生變化時執(zhí)行。
componentDidMount: 組件掛載完成時被執(zhí)行。

控制臺打印出來的順序是：

這也是生命周期的順序。這個函數書寫有順序嗎?哪個在前？哪個在后？其實是沒有順序的，你可以隨便改動他們的順序。

注意的問題

componentWillMount和componentDidMount這兩個生命周期函數，只在頁面刷新時執(zhí)行一次，而render函數是只要有state和props變化就會執(zhí)行

4.updation階段

React生命周期中的Updation階段,也就是組件發(fā)生改變的更新階段，這是React生命周期中比較復雜的一部分，它有兩個基本部分組成，一個是props屬性改變，一個是state狀態(tài)改變

shouldComponentUpdate函數

shouldComponentUpdate函數會在組件更新之前，自動被執(zhí)行。

它要求返回一個布爾類型的結果，必須有返回值，這里就直接返回一個true了（真實開發(fā)中，這個是有大作用的）。

現在就可以在控制臺console里看到結果了，并且結果是每次文本框發(fā)生改變時都會隨著改變。如果你返回了false，這組件就不會進行更新了。 簡單點說，就是返回true，就同意組件更新;返回false,就反對組件更新。

componentWillUpdate函數

componentWillUpdate在組件更新之前，但shouldComponenUpdate之后被執(zhí)行。但是如果shouldComponentUpdate返回false，這個函數就不會被執(zhí)行了。

componentDidUpdate函數

componentDidUpdate在組件更新之后執(zhí)行，它是組件更新的最后一個環(huán)節(jié)。

componentWillReceiveProps函數

將這個函數如果寫在父組件Xiao.js中，

這時候會發(fā)現函數什么時候都不會被執(zhí)行，因為Xiao.js算是一個頂層組件，它并沒接收任何的props。可以把這個函數移動到XiaoItem.js組件中。

凡是組件都有生命周期函數，所以子組件也是有的，并且子組件接收了props，這時候函數就可以被執(zhí)行了。

這個時候再預覽，就會看到componentWillReceiveProps執(zhí)行了。那現在可以總結一下它的執(zhí)行時間了。

子組件接收到父組件傳遞過來的參數，父組件render函數重新被執(zhí)行，這個生命周期就會被執(zhí)行。

也就是說這個組件第一次存在于Dom中，函數是不會被執(zhí)行的（第一次渲染子組件時候，componentWillReceiveProps函數不會被執(zhí)行）;
如果已經存在于Dom中，函數才會被執(zhí)行（只有發(fā)生變化時候，第二次渲染的時候，才會被執(zhí)行）。

這個生命周期算是比較復雜的一個生命周期，需要我們花點時間去消化。

5.componentWillUnmount(只有在刪除時候才會執(zhí)行)

這個函數時組件從頁面中刪除的時候執(zhí)行，比如在XiaoItem.js，寫入下面的代碼:

寫完后，可以到瀏覽器終端中查看結果，當我們點擊服務項，服務項被刪除時，這個函數就被執(zhí)行了。

總結

以上是生活随笔為你收集整理的React生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。