概述
前幾天和同事討論react，發現對生命周期還是了解的不夠深入，於是今天翻看了react關於生命周期的官方文檔，剛好發現react發布了新版本，並且對生命周期做了修改，於是認真閱讀了一下，並記錄下來，供以后開發時參考，相信對其他人也有用。
總述
以前覺得生命周期的英文太多了，要記很麻煩。現在看文檔才發現，有些小竅門。
帶有will的都是在動作發生前執行，帶有did的都是在動作發生之后執行。然后再記住幾個關鍵詞：mounting，updating，unmounting，error handling。
Mounting階段
constructor()
constructor方法在組件建立前被調用。
- 在這個方法里面，應該先調用super(props)，否則this.props就會未定義。
- 這個方法的主要用途是，初始化props，state和綁定方法。
- 如果在里面用props為state賦值，那么最好把state提升，也可以在getDerivedStateFromProps()里面用props為state賦值。
static getDerivedStateFromProps()
在下列三種情況下，會調用getDerivedStateFromProps方法：
- 組件實例化。
- 組件的props發生變化。
- 父組件重新渲染。
this.setState()不會觸發getDerivedStateFromProps()，但是this.forceUpdate()會。
UNSAFE_componentWillMount()
這個方法在render方法執行前被調用。官方不建議用這個方法，所以給它加了一個UNSAFE前綴。官方建議把要在這里面寫的內容放到constructor()或者componentDidMount()里面。
另外，這個方法是唯一的服務端渲染鈎子。
render()
當調用render的時候，組件會檢查props和state並返回下列類型中的一個：
- react元素。
- 字符串或者數字。
- Portals。
- null。(不渲染)
- Booleans。(不渲染)
- react.Fragment。
componentDidMount()
這個方法會在組件建立之后立即調用。需要DOM節點的初始化應該放在這里。
需要注意的是，在這里調用setState()會發生第二次render，但是這第二次render會發生在瀏覽器渲染之前，所以用戶往往看不到第二次渲染，即使這樣，也要小心使用這個方法，因為它會造成性能問題。
Update階段
UNSAFE_componentWillReceiveProps()
在下列三種情況下，會調用UNSAFE_componentWillReceiveProps方法，但是官方不建議使用這個方法，官方建議使用static getDerivedStateFromProps方法。
- 組件的props發生改變。
- 父組件發生重新渲染。
需要注意的是，在初始化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之后調用，並進行處理。不要在里面改變數據流，它也不能處理本身拋出的錯誤。