1.React生命周期

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

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

2.什么是生命周期函數(shù)？

生命周期函數(shù)指在某一時(shí)刻組件會(huì)自動(dòng)調(diào)用執(zhí)行的函數(shù)

render()函數(shù)，就是一個(gè)生命周期函數(shù)，它在state發(fā)生改變時(shí)自動(dòng)執(zhí)行。這就是一個(gè)標(biāo)準(zhǔn)的自動(dòng)執(zhí)行函數(shù)。

constructor不算生命周期函數(shù)。

constructor我們叫構(gòu)造函數(shù)，它是ES6的基本語(yǔ)法。雖然它和生命周期函數(shù)的性質(zhì)一樣，但不能認(rèn)為是生命周期函數(shù)。

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

3.Mounting階段

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

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

控制臺(tái)打印出來(lái)的順序是：

這也是生命周期的順序。這個(gè)函數(shù)書寫有順序嗎?哪個(gè)在前？哪個(gè)在后？其實(shí)是沒(méi)有順序的，你可以隨便改動(dòng)他們的順序。

注意的問(wèn)題

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

4.updation階段

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

shouldComponentUpdate函數(shù)

shouldComponentUpdate函數(shù)會(huì)在組件更新之前，自動(dòng)被執(zhí)行。

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

現(xiàn)在就可以在控制臺(tái)console里看到結(jié)果了，并且結(jié)果是每次文本框發(fā)生改變時(shí)都會(huì)隨著改變。如果你返回了false，這組件就不會(huì)進(jìn)行更新了。 簡(jiǎn)單點(diǎn)說(shuō)，就是返回true，就同意組件更新;返回false,就反對(duì)組件更新。

componentWillUpdate函數(shù)

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

componentDidUpdate函數(shù)

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

componentWillReceiveProps函數(shù)

將這個(gè)函數(shù)如果寫在父組件Xiao.js中，

這時(shí)候會(huì)發(fā)現(xiàn)函數(shù)什么時(shí)候都不會(huì)被執(zhí)行，因?yàn)?code>Xiao.js算是一個(gè)頂層組件，它并沒(méi)接收任何的props。可以把這個(gè)函數(shù)移動(dòng)到XiaoItem.js組件中。

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

這個(gè)時(shí)候再預(yù)覽，就會(huì)看到componentWillReceiveProps執(zhí)行了。那現(xiàn)在可以總結(jié)一下它的執(zhí)行時(shí)間了。

子組件接收到父組件傳遞過(guò)來(lái)的參數(shù)，父組件render函數(shù)重新被執(zhí)行，這個(gè)生命周期就會(huì)被執(zhí)行。

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

這個(gè)生命周期算是比較復(fù)雜的一個(gè)生命周期，需要我們花點(diǎn)時(shí)間去消化。

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

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

寫完后，可以到瀏覽器終端中查看結(jié)果，當(dāng)我們點(diǎn)擊服務(wù)項(xiàng)，服務(wù)項(xiàng)被刪除時(shí)，這個(gè)函數(shù)就被執(zhí)行了。

總結(jié)

以上是生活随笔為你收集整理的React生命周期的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。