先來vue的吧，先上圖,生命周期就好比一個人重出生到青少年再到青年再到中年在到老年到死亡的一個過程，不同的過程做不同的事情。
好了，上代碼
beforeCreate ：數據還沒有掛載呢，只是一個空殼
created:這個時候已經可以使用到數據，也可以更改數據,在這里更改數據不會觸發updated函數
beforeMount：虛擬dom已經創建完成，馬上就要渲染,在這里也可以更改數據，不會觸發updated
mounted：此時，組件已經出現在頁面中，數據、真實dom都已經處理好了,事件都已經掛載好了
beforeUpdate:重新渲染之前觸發,然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染
updated:數據已經更改完成，dom也重新render完成
beforeDestory:銷毀前執行（$destroy方法被調用的時候就會執行）,一般在這里善后:清除計時器、清除非指令綁定的事件等等...
destroyed:組件的數據綁定、監聽...都去掉了,只剩下dom空殼，這里也可以善后
常用的生命周期也就 標紅的那幾個了，
**************
React的生命周期
**************
React 生命周期分為三種狀態 1. 初始化 2.更新 3.銷毀（其實vue差不多啊）
寫生命周期這些函數的時候呢就不用了寫成箭頭函數那種形式了 直接 XXX(){} 跟vue一樣
@1 react初始化的順序是，constructor然后是componentWillMount（相當於vue 的beforeMounted,） 然后是 render渲染函數再然后是componentDidMount（相當於vue的mounted ）
@2 更新的時候：componentWillUpdate、render、componentDidUpdate（跟vue一樣 平時沒在用到更新的鈎子函數）
比如也沒一個按鈕，點擊改變msg
改變值，相當於更新嘛，執行的順序是
這里我沒有寫shouldComponentUpdate，其實在更新的時也會觸發這個鈎子函數，你不寫默認就是true，數據改變會執行更新的鈎子函數， 如果你要組織他更新的話就寫這個鈎子函數寫成false,意思就是不讓你更新
可以看到啊，當我寫成false的時候，更新鈎子函數都沒有執行，render函數也沒有執行
這個函數還有2個參數，了解一下就行，平時不怎么用
@3 銷毀的時候： componentWillUnmount（vue的 話一般用beforeDestroy用來清除定時器等）
這里還有一個比較少用的鈎子函數
你在父組件里面改變props傳值的時候觸發的：componentWillReceiveProps
總結一下，最常用的還是
componentDidMount（對vue--mounted）.
componentWillUnmount（對vue--beforeDestroy）
生命周期跟render同級，寫的方法的話也是同級（vue用methods包起來的）