生命周期

任何事物都不會憑空產生，也不會無故消亡。一個事物從產生到消亡經理的各個階段，我們稱之為 生命周期。

具體到我們的前端組件上來，一個組件的生命周期可以大體分為創建、更新、銷毀這個三個階段。

本文主要介紹React 的組件生命周期，并以最新發布的v16為分水嶺，介紹前后生命周期函數的變化。

組件生命周期

在React代碼里，我們通常通過繼承React.Component這個抽象基礎類來定義一個有生命周期函數的組件（函數式生命無法自定義生命周期函數），react官方將其生命周期分為以下三個階段：

裝載

這個階段是指組件初始化并插入DOM中，主要包含以下函數：

constructor()
static getDerivedStateFromProps()
componentWillMount() / UNSAFE_componentWillMount()
render()
componentDidMount()

更新

當組件狀態發生變化時，會觸發一次更新

componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate() / UNSAFE_componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

銷毀

當組件從DOM中移除時，啟動銷毀：

componentWillUnmount()

具體如下圖：

如上圖所示，綠色背景為v16版本新增的生命周期函數，黃色背景的的為v16版本建議棄用，并在后續版本中會刪除的生命周期函數。

其中getDerivedStateFromProps是一個靜態函數，用來替換原來的componentWillMount函數，可以在這個靜態函數中將props里的屬性添加到state中去，這里應該是一個純函數。

getSnapshotBeforeUpdate用來做一些必須要修改真實DOM的操作，雖然不建議這么做。

One more thing

React 同時提供一個componentDidCatch函數，來表明當前組件是一個邊界錯誤處理組件，具體可以參考錯誤邊界

參考鏈接