react生命周期16版本刪除了什么鉤子函數(shù)?為什么刪除?有什么替代的

　　react和vue一樣，生命周期也分為三個(gè)階段：初始化、運(yùn)行中、銷毀。

　　react生命周期在16后面版本進(jìn)行了更新迭代，初始化階段生命周期順序：

　　先執(zhí)行constructor，在這里可以創(chuàng)建組件實(shí)例，傳遞屬性，掛載初始狀態(tài)、this-binding

　　然后執(zhí)行static getDerivedStateFromProps， 這是新增的一個(gè)生命周期鉤子函數(shù)，本身是一個(gè)靜態(tài)方法，內(nèi)部不能訪問this，可以根據(jù)當(dāng)前的屬性和狀態(tài)生成一個(gè)派生的狀態(tài)，但是需要注意的是，任何屬性和狀態(tài)變化都會(huì)再次引起這個(gè)鉤子函數(shù)的執(zhí)行，所以往往會(huì)存在一些性能問題。需要自行做緩存優(yōu)化。

　　接下來刪除了一個(gè)componentWillMount，類似與vue中的beforeMount，因?yàn)閞eact提倡render前不做副作用動(dòng)作，保持純凈，所以被廢棄。

　　接下來執(zhí)行render函數(shù)，在render中也不要做副作用動(dòng)作，容易造成死循環(huán)，作用就是生成虛擬dom結(jié)構(gòu)。

　　最后執(zhí)行的是componentDidMount，在這里可以做副作用動(dòng)作了，初始的調(diào)用接口、dom操作、一些插件的初始化、事件的綁定。

　　當(dāng)組件的屬性和狀態(tài)變化或者執(zhí)行forceUpdate的時(shí)候， 會(huì)引起運(yùn)行中階段的鉤子函數(shù)執(zhí)行。

　　接下來刪除了一個(gè)componentWillReceiveProps，這個(gè)鉤子函數(shù)會(huì)在屬性更新的時(shí)候執(zhí)行，我們之前可以在這里根據(jù)更新后的屬性來更改自身的狀態(tài)或者做一些其他的邏輯動(dòng)作，現(xiàn)在可以利用getDerivedStateFromProps替代，并且因?yàn)閞ender前不能做副作用，所以廢棄。

　　首先還是執(zhí)行static getDerivedStateFromProps， 再次進(jìn)行派生狀態(tài)的計(jì)算生成。

　　接下來會(huì)執(zhí)行shouldComponentUpdate，在這個(gè)鉤子函數(shù)中可以通過this上當(dāng)前的屬性和狀態(tài)與函數(shù)參數(shù)中接收到更改后的屬性和狀態(tài)進(jìn)行對(duì)比，判斷是否要繼續(xù)執(zhí)行其他的生命周期鉤子函數(shù)，提升性能，需要注意的是forceUpdate執(zhí)行后，不會(huì)執(zhí)行shouldComponentUpdate，也可以利用PureComponent父類中默認(rèn)的淺對(duì)比的shouldComponentUpdate來優(yōu)化效果。

　　接下來還會(huì)執(zhí)行render，之后就是static getSnapshotBeforeUpdate，在這里可以提前進(jìn)行一些數(shù)據(jù)的計(jì)算，將結(jié)果返回到componentDidUpdate中，進(jìn)行邏輯分離， 之前在componentDidUpdate前會(huì)執(zhí)行一個(gè)componentWillUpdate，因?yàn)楣δ苣芰Ρ籫etSnapshotBeforeUpdate取代，自身也不能做副作用，所以被廢棄。

　　最后執(zhí)行componentDidUpdate，在這里可以進(jìn)行插件更新、dom的操作，也可以根據(jù)this上最新的屬性和方法與函數(shù)參數(shù)中接收到的之前的屬性和方法對(duì)比，判斷此次更新的是哪一個(gè)數(shù)據(jù)，起到監(jiān)聽數(shù)據(jù)變化的作用。

　　當(dāng)組件銷毀的時(shí)候，例如路由切換、組件切換，對(duì)應(yīng)組件的是componentWillUnmount會(huì)執(zhí)行，在這里我們可以做一些善后工作，例如清除計(jì)時(shí)器、事件解綁等。

上一篇

react 中 useMemo 和 useCallback的區(qū)別?

下一篇

Redux解決了什么問題？是如何工作的？