從vue來到了react窝爪，很多相似之處弛车，還好，自我感覺生命周期函數(shù)就是個(gè)執(zhí)行過程蒲每，生命周期函數(shù)（鉤子函數(shù)）通俗的說就是在某一時(shí)刻會(huì)被自動(dòng)調(diào)用執(zhí)行的函數(shù)
從React生命周期官方了解
componentWillMount
在渲染前調(diào)用,在客戶端也在服務(wù)端纷跛。
componentDidMount
在第一次渲染后調(diào)用，只在客戶端邀杏。之后組件已經(jīng)生成了對應(yīng)的DOM結(jié)構(gòu)贫奠，可以通過this.getDOMNode()來進(jìn)行訪問。 如果你想和其他JavaScript框架一起使用望蜡，可以在這個(gè)方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請求等操作(防止異步操作阻塞UI)唤崭。
componentWillReceiveProps
在組件接收到一個(gè)新的 prop (更新后)時(shí)被調(diào)用。這個(gè)方法在初始化render時(shí)不會(huì)被調(diào)用脖律。
shouldComponentUpdate
返回一個(gè)布爾值浩姥。在組件接收到新的props或者state時(shí)被調(diào)用。在初始化時(shí)或者使用forceUpdate時(shí)不被調(diào)用状您。
可以在你確認(rèn)不需要更新組件時(shí)使用勒叠。
componentWillUpdate
在組件接收到新的props或者state但還沒有render時(shí)被調(diào)用。在初始化時(shí)不會(huì)被調(diào)用膏孟。
componentDidUpdate
在組件完成更新后立即調(diào)用眯分。在初始化時(shí)不會(huì)被調(diào)用。
componentWillUnmount
在組件從 DOM 中移除的時(shí)候立刻被調(diào)用柒桑。
react的生命周期可以分成四個(gè)部分：
1.初始化
在這里可以初始化props,state
2.掛載
①：componentWillMount(): 注意：改生命周期在未來17版本中將被棄用(在這里請求異步數(shù)據(jù)弊决，render可能不會(huì)渲染到，因?yàn)閏omponentWillMount執(zhí)行后魁淳，render立馬執(zhí)行)
組件被掛載到頁面之前調(diào)用飘诗，整個(gè)生命周期中只會(huì)調(diào)用一次（組件更新時(shí)不會(huì)再調(diào)用）。
注意：在這里可修改state
②：componentDidMount()：
組件被掛載到頁面之后調(diào)用界逛，整個(gè)生命周期只調(diào)用一次（組件更新不會(huì)調(diào)用）昆稿。
建議：在這里可以異步請求數(shù)據(jù)。在這里設(shè)置狀態(tài)會(huì)觸發(fā)重新渲染息拜。但是不推薦在這里使用setState函數(shù)溉潭，它會(huì)觸發(fā)一次額外的渲染，而且是在瀏覽器刷新屏幕之前執(zhí)行少欺，用戶看不到這個(gè)狀態(tài)喳瓣。在這里使用setState函數(shù)會(huì)導(dǎo)致性能問題
3.更新
getDerivedStateFromProps(nextProps,prevState)
新的靜態(tài)getDerivedStateFromProps生命周期在組件實(shí)例化以及接收新props(只要父組件重新渲染，那么這個(gè)props不論值是否一樣都是一個(gè)新的props)后調(diào)用赞别。它可以返回一個(gè)對象來更新state畏陕，或者返回null來表示新的props不需要任何state更新。
getSnapshotBeforeUpdate()
新的getSnapshotBeforeUpdate生命周期在更新之前被調(diào)用（例如仿滔，在DOM被更新之前）惠毁。此生命周期的返回值將作為第三個(gè)參數(shù)傳遞給componentDidUpdate。 （這個(gè)生命周期不是經(jīng)常需要的堤撵，但可以用于在恢復(fù)期間手動(dòng)保存滾動(dòng)位置的情況仁讨。）
componentWillReceiveProps(nextprops): //注意：此生命周期在未來17版本中將被棄用
組件從父組件中接受了新的props(只要父組件重新渲染，那么這個(gè)props不論值是否一樣都是一個(gè)新的props)实昨，并且組件已經(jīng)存在時(shí)調(diào)用洞豁。（組件初始化時(shí)候不調(diào)用）。
shouldComponentUpdate(nextprops,nextstate):
組件更新之前調(diào)用（組件接受新的props或者state）荒给。函數(shù)會(huì)返回一個(gè)布爾值丈挟，true才會(huì)更新組件。
注意：最好判斷一下新舊兩個(gè)props/state是否相同志电，相同則返回false不要觸發(fā)更新曙咽。這樣就不用生成新的dom樹和舊的進(jìn)行diff算法對比，從而優(yōu)化性能挑辆。（因?yàn)楦附M件render()調(diào)用會(huì)使得子組件render()也被執(zhí)行例朱，引起性能問題）
componentWillUpdate(nextprops,nextstate): //注意：此生命周期在未來17版本中將被棄用
組件更新之前（componentshouldupdate返回true）時(shí)調(diào)用孝情，組件初始化時(shí)不調(diào)用
注意：在這里可以更改state，nextstate.xxx = xxx,但是在這里不能調(diào)用setState函數(shù)洒嗤，這會(huì)導(dǎo)致函數(shù)調(diào)用componentshouldupdate從而進(jìn)入死循環(huán)箫荡。
componentDidUpdate():
組件更新完成之后調(diào)用，組件初始化時(shí)候不調(diào)用渔隶。
4.卸載
componentWillUnmount():
組件即將被卸載時(shí)執(zhí)行
注意：在這里清除一些不需要的監(jiān)聽和計(jì)時(shí)器
