快速瞭解React的組件生命週期

前言

工做快要滿兩個月了，一直在使用React全家桶（React + React Redux + Router + Ant Design）。工做中涉及到React生命週期函數的使用很是多，在此作一個整理。

React的組件生命週期

在這裏我想引用 React中文文檔 中的原話：

每一個組件都有幾個 「生命週期方法」 ，您能夠重寫這些方法，以在過程當中的特定時間運行代碼。 前綴爲 will 的方法在一些事情發生以前被調用，而前綴爲 did 的方法在一些事情發生後被調用。

這段話告訴咱們三件事情：

1. 生命週期方法咱們能夠本身改寫。
2. 前綴是 will 的方法在一些事情發生以前被調用。
3. 前綴爲 did 的方法在一些事情發生後被調用。

那組件的生命週期分爲哪幾個過程呢？共有三大過程：Mounting(裝載)，Updating(更新)，Unmounting(卸載)

Mounting的意思就是一個組件實例被建立並將其插入 DOM 中；
Updating的意思就是剛剛完成Mounting的這個組件實例發生了變化，好比改變了 props 或 state；
Unmounting的意思就是這個組件從 DOM 中刪除；

簡而言之就是這三大過程，我去首次掛載這個組件，我去更新這個組件，我去卸載這個組件。
如下要介紹的組件的生命週期函數全都是圍繞這三大過程。

組件的生命週期函數

當Mounting發生的時候

當組件掛載發生的時候，如下函數前後觸發：

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount()

當Updating發生的時候

當組件更新發生的時候，如下函數前後觸發：

1. componentWillReceiveProps()
2. shouldComponentUpdate()
3. componentWillUpdate()
4. render()
5. componentDidUpdate()

當Unmounting發生的時候

當組件卸載發生的時候，這個函數觸發：

• componentWillUnmount()

具體的函數參數和使用能夠參考 React生命週期函數

總結

這些函數仍是頗有用的。

好比，在一個組件裏要作一些後端數據請求，咱們都是把請求放在componentDidMount()中；自定義Form組件的時候，咱們常常會用到componentWillReceiveProps()。

固然這些是我我的的一些經驗，就不展開說了。你們遇到相似需求的時候，別忘了這些好用的函數就行了。

補充

以後在讀《深刻React技術棧》這本書的時候，發現了一個描述React生命週期的很清晰的圖，在這裏貼一下：