前言
近年前端技術層出不窮，Facebook 推出的 React 也是程序員間討論最多的 Javascript 框架之一。借這個機會開始學習 React，並把筆記作為 React 基礎教程系列（參考 React 官網）。
因為屬於入門，不太適合對 React 有經驗的同學，但希望到此的同學多少都有所收穫。
為了更好的閱讀體驗，可以在文章底下的“瞭解更多”中查看原文。
重要性
瞭解一個框架，最好的辦法就是對它的整個生命週期在不同階段在幹那些事情給搞明白；這樣也對編寫代碼更有幫助，能減少 bug，也能增加程序的合理性。
套用 vue 官網那句話：隨著你的不斷學習和使用，它的參考價值會越來越高。如果你有一定的經驗，相信知道這是個實實在在的大白話（起碼我是這麼認為的）。
生命週期圖例
React 對它的生命週期分類兩類（常用、不常用），這樣非常友好，能讓剛學習 React 的同學只關注相對重要的那方面。
常見的生命週期：
整個生命週期流程：
細說：生命週期 API
API 分類
掛載
組件實例創建後插入 DOM 中時，觸發的方法：
更新
- 其不屬於生命週期，但可以通過此方法來強制讓 render 刷新，同時跳過 shouldComponentUpdate
卸載
- componentWillUnmount()
constructor（常用）
因為是 class 方式定義的組件，在子類創建時，會先觸發構造函數。定義的構造函數需要調用 super(props) 定義好 ，以避免不必要的 bug 。
constructor 可以省略，通常會有以下兩種使用場景：
componentDidMount（常用）
componentDidMount 和 componentWillUnmount 對應，如果有監聽訂閱等方法時，分別在這兩個週期內執行訂閱和取消。
不建議在 componentDidMount 是使用 setState() 方法，因為會觸發多次渲染方法，即使用戶看不到 state 數據的變化過程，但因為 DOM 已經首次渲染到頁面上，會有性能問題的產生。
能看到後面的紅框又觸發了 render 方法：
render（常用）
這是每個 class 組件必須實現的方法，並且執行 render 渲染將返回一個純函數 function 。
這個函數通常是如下幾種結果：
需要注意，當 shouldComponentUpdate 為 false 時，render 就不會被調用。
componentDidUpdate（常用）
在 props ，state 更新後，會觸發此方法：
上述是個經典的用法示例，如果沒有這層 if 判斷，會使得所有的更新都會觸發我們定義的邏輯方法（比如，異步請求 api 將相當耗費資源）
componentWillUnmount（常用）
應該在此方法中銷燬，卸載一些方法，諸如：定時器。以確保在組件移除時，不會對整個應用有"負面消耗"。
雖然此方法是組件銷燬前執行，但不要在其中調用 setState 方法，因為不會再觸發 render 渲染流程。
getDerivedStateFromProps
根據名字定義，當 props 更新後，計算得到派生的 state。
下面會詳細舉例兩個關於"派生 state"的問題，從而來更詳細的瞭解 getDerivedStateFromProps 方法：
shouldComponentUpdate
shouldComponentUpdate 在 state 更新，以及新的 props 傳入時觸發，並且在 getDerivedStateFromProps 之後。
注意：首次渲染，以及 forceUpdate 不會觸發此方法。
shouldComponentUpdate 僅僅作為性能優化而使用。通過返回 true/false 來告訴 React 是否要進行更新。
從而避免調用 componentWillUpdate、render、componentDidUpdate 方法。
另外 React.Component 內部沒有實現 shouldComponentUpdate 方法，而 React.PureComponent 會以淺比較方式來對比，以代替 shouldComponentUpdate 。
這裡要說下 PureComponent 類：
和 React.Component 不同，其內部會通過淺比較的方式來對比 props 和 state 對象，來觸發 React 更新。
以用來代替生命週期中的 shouldComponentUpdate 實現。
注意，因為是淺比較，如果是數組等類型的數據，將不會觸發 render：
getSnapshotBeforeUpdate
在更新渲染之前會調用此方法，我們可以在這裡設置一些邏輯值，最後可以在 componentDidUpdate 方法中得到。
總結
所謂一圖勝千言，上面再多對生命週期方法做的介紹，都不如仔細把兩張圖譜銘記於心。
只有這樣，才能儘可能提升 React 的編程設計能力，減少 bug 等問題的發生。
閱讀更多 前端雨爸 的文章
關鍵字: 技術 JavaScript Facebook
