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

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

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

　　先執行constructor，在這里可以創建組件實例，傳遞屬性，掛載初始狀態、this-binding

　　然后執行static getDerivedStateFromProps， 這是新增的一個生命周期鉤子函數，本身是一個靜態方法，內部不能訪問this，可以根據當前的屬性和狀態生成一個派生的狀態，但是需要注意的是，任何屬性和狀態變化都會再次引起這個鉤子函數的執行，所以往往會存在一些性能問題。需要自行做緩存優化。

　　接下來刪除了一個componentWillMount，類似與vue中的beforeMount，因為react提倡render前不做副作用動作，保持純凈，所以被廢棄。

　　接下來執行render函數，在render中也不要做副作用動作，容易造成死循環，作用就是生成虛擬dom結構。

　　最后執行的是componentDidMount，在這里可以做副作用動作了，初始的調用接口、dom操作、一些插件的初始化、事件的綁定。

　　當組件的屬性和狀態變化或者執行forceUpdate的時候， 會引起運行中階段的鉤子函數執行。

　　接下來刪除了一個componentWillReceiveProps，這個鉤子函數會在屬性更新的時候執行，我們之前可以在這里根據更新后的屬性來更改自身的狀態或者做一些其他的邏輯動作，現在可以利用getDerivedStateFromProps替代，并且因為render前不能做副作用，所以廢棄。

　　首先還是執行static getDerivedStateFromProps， 再次進行派生狀態的計算生成。

　　接下來會執行shouldComponentUpdate，在這個鉤子函數中可以通過this上當前的屬性和狀態與函數參數中接收到更改后的屬性和狀態進行對比，判斷是否要繼續執行其他的生命周期鉤子函數，提升性能，需要注意的是forceUpdate執行后，不會執行shouldComponentUpdate，也可以利用PureComponent父類中默認的淺對比的shouldComponentUpdate來優化效果。

　　接下來還會執行render，之后就是static getSnapshotBeforeUpdate，在這里可以提前進行一些數據的計算，將結果返回到componentDidUpdate中，進行邏輯分離， 之前在componentDidUpdate前會執行一個componentWillUpdate，因為功能能力被getSnapshotBeforeUpdate取代，自身也不能做副作用，所以被廢棄。

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

　　當組件銷毀的時候，例如路由切換、組件切換，對應組件的是componentWillUnmount會執行，在這里我們可以做一些善后工作，例如清除計時器、事件解綁等。

上一篇

react 中 useMemo 和 useCallback的區別?

下一篇

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