react的生命週期

概述

前幾天和同事討論react，發現對生命週期仍是瞭解的不夠深刻，因而今天翻看了react關於生命週期的官方文檔，恰好發現react發佈了新版本，而且對生命週期作了修改，因而認真閱讀了一下，並記錄下來，供之後開發時參考，相信對其餘人也有用。

總述

之前以爲生命週期的英文太多了，要記很麻煩。如今看文檔才發現，有些小竅門。

帶有will的都是在動做發生前執行，帶有did的都是在動做發生以後執行。而後再記住幾個關鍵詞：mounting，updating，unmounting，error handling。

Mounting階段

constructor()

constructor方法在組件創建前被調用。

1. 在這個方法裏面，應該先調用super(props)，不然this.props就會未定義。
2. 這個方法的主要用途是，初始化props，state和綁定方法。
3. 若是在裏面用props爲state賦值，那麼最好把state提高，也能夠在getDerivedStateFromProps()裏面用props爲state賦值。

static getDerivedStateFromProps()

在下列三種狀況下，會調用getDerivedStateFromProps方法：

1. 組件實例化。
2. 組件的props發生變化。
3. 父組件從新渲染。

this.setState()不會觸發getDerivedStateFromProps()，可是this.forceUpdate()會。

UNSAFE_componentWillMount()

這個方法在render方法執行前被調用。官方不建議用這個方法，因此給它加了一個UNSAFE前綴。官方建議把要在這裏面寫的內容放到constructor()或者componentDidMount()裏面。

另外，這個方法是惟一的服務端渲染鉤子。

render()

當調用render的時候，組件會檢查props和state並返回下列類型中的一個：

1. react元素。
2. 字符串或者數字。
3. Portals。
4. null。(不渲染)
5. Booleans。(不渲染)
6. react.Fragment。

componentDidMount()

這個方法會在組件創建以後當即調用。須要DOM節點的初始化應該放在這裏。

須要注意的是，在這裏調用setState()會發生第二次render，可是這第二次render會發生在瀏覽器渲染以前，因此用戶每每看不到第二次渲染，即便這樣，也要當心使用這個方法，由於它會形成性能問題。

Update階段

UNSAFE_componentWillReceiveProps()

在下列三種狀況下，會調用UNSAFE_componentWillReceiveProps方法，可是官方不建議使用這個方法，官方建議使用static getDerivedStateFromProps方法。

1. 組件的props發生改變。
2. 父組件發生從新渲染。

須要注意的是，在初始化props的時候並不會調用這個方法，this.setState()也不會觸發這個方法。

static getDerivedStateFromProps

在update階段也會調用一次這個方法。

shouldComponentUpdate()

這個方法的默認行爲是每當state發生改變的時候就從新渲染組件。

當初始化的時候，這個方法不會被調用，當使用forceUpdate()的時候，這個方法也不會調用。

若是要提高性能的話，建議使用React.PureComponent，它在shouldComponentUpdate()的默認行爲中使用了淺比較。你也能夠在裏面本身寫比較方法。

UNSAFE_componentWillUpdate()

這個方法會在接受新props和state以後調用。官方不建議在裏面調用setState()，要使用的話，建議在getDerivedStateFromProps方法裏面使用。

render()

在update階段也會調用一次這個方法。

getSnapshotBeforeUpdate()

這個方法會在把渲染結果提交到DOM以前被調用。它能夠返回一個參數，這個參數被componentDidUpdate(prevProps, prevState, snapshot)方法的第三個參數接收。

componentDidUpdate()

這個方法會在組件更新前被調用，因此最好在這裏面操做DOM。

Unmounting階段

componentWillUnmount

這個方法會在組件被銷燬時調用，因此在這裏面作一些必要的清理，好比計時器，網絡請求，訂閱等等。

Error階段

componentDidCatch()

這個方法在組件catch到各類error以後調用，並進行處理。不要在裏面改變數據流，它也不能處理自己拋出的錯誤。