本人之前寫在CSDN上的文章躏结，原創(chuàng)轉(zhuǎn)載至此劫狠；react的生命周期鉤子
class ComponentA extends React.Component{
constructor() {
// 構(gòu)造函數(shù)，在創(chuàng)建組件的時候調(diào)用一次骚揍。
// 組件初始化開始
// 初始化state
}
getDefaultProps() {
// 設(shè)置默認(rèn)的props字管，也可以用dufaultProps設(shè)置組件的默認(rèn)屬性。
}
getInitialState() {
// 初始化state信不，可以直接在constructor中定義this.state
}
componentWillMount() {
// 組件將要掛載嘲叔，組件加載時調(diào)用，以后組件更新不調(diào)用抽活，整個生命周期只調(diào)用一次硫戈，此時可以修改state
// 已經(jīng)可以讀取到state數(shù)據(jù)
// 已經(jīng)在內(nèi)存中產(chǎn)生虛擬DOM樹 但是還沒有顯示在頁面上
// Tip1: 不建議在此請求數(shù)據(jù)，由于請求數(shù)據(jù)接口一般都是異步下硕，這時候render已經(jīng)被執(zhí)行丁逝，建議在componentDidMount 數(shù)據(jù)
// Tip2: 如果在服務(wù)端渲染汁胆，該鉤子函數(shù)將被調(diào)用兩次，一次服務(wù)端霜幼，一次瀏覽器端嫩码，而componentDidMount函數(shù)只會在瀏覽器端請求一次
}
render() {
// react最重要的步驟，創(chuàng)建虛擬dom罪既，進(jìn)行diff算法铸题，更新dom樹都在此進(jìn)行
// Tip：記住，不要在render里面修改state萝衩。
}
componentDidMount() {
// 所有的組件（包括子組件）在render執(zhí)行完之后立即調(diào)用回挽，并且只會被調(diào)用一次。
// 組件已經(jīng)初始化完成
// DOM樹渲染完成
// Tip: 建議在此請求數(shù)據(jù)
}
componentWillReceiveProps(nextProps) {
// props的數(shù)據(jù)發(fā)生改變的時候觸發(fā)猩谊，在該函數(shù)內(nèi)部this.props.屬性還沒有發(fā)生變化千劈，但是可以通過第一個參數(shù)nextProps獲取到修改之后的props屬性
// 在props被改變時被觸發(fā)，初始化render時不調(diào)用牌捷。
// 舊的屬性還是可以通過this.props來獲取墙牌，在這里通過調(diào)用this.setState()來更新你的組件狀態(tài)。
// Tip1: 某些情況下暗甥，props沒變也會觸發(fā)該鉤子函數(shù)喜滨，需要在方法里手動判斷一下this.props和nextProps是否相同，不相同了才執(zhí)行我的更新方法撤防。
// Tip2：該函數(shù)一般用來更新依賴props的狀態(tài)
}
shouldComponentUpdate(nextProps, nextState) {
// 組件接收到新的props或者state時調(diào)用虽风，return true就會更新dom（使用diff算法更新），return false能阻止更新（不調(diào)用render）
// 在函數(shù)內(nèi)部state和props還未改變寄月，新的props和state在兩個參數(shù)內(nèi)
// 發(fā)生重渲染時辜膝，在render()函數(shù)調(diào)用前被調(diào)用的函數(shù)，當(dāng)函數(shù)返回false時候漾肮，阻止接下來的render()函數(shù)的調(diào)用厂抖，阻止組件重渲染，而返回true時克懊，組件照常重渲染忱辅。
// 該方法并不會在初始化渲染或當(dāng)使用forceUpdate()時被調(diào)用。
}
componentWillUpdate(nextProps, nextState) {
// shouldComponentUpdate返回true或者調(diào)用forceUpdate之后谭溉，componentWillUpdate會被調(diào)用墙懂。
// 數(shù)據(jù)修改，接著執(zhí)行render
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// 觸發(fā)時間: update發(fā)生的時候扮念，在render之后损搬，在組件dom渲染之前；返回一個值，作為componentDidUpdate的第三個參數(shù)场躯；配合componentDidUpdate, 可以覆蓋componentWillUpdate的所有用法
// 該函數(shù)在最新的渲染輸出提交給DOM前將會立即調(diào)用。它讓你的組件能在當(dāng)前的值可能要改變前獲得它們旅挤。這一生命周期返回的任何值將會 作為參數(shù)被傳遞給componentDidUpdate()踢关。
}
componentDidUpdate(prevProps, prevState) {
// 數(shù)據(jù)修改成功，組件更新完成后調(diào)用
// 除了首次render之后調(diào)用componentDidMount粘茄，其它render結(jié)束之后都是調(diào)用componentDidUpdate签舞。
// 通過prevProps和prevState訪問修改之前的props和state
}
componentWillUnmount() {
// 在組件被卸載和銷毀之前立刻調(diào)用∑獍辏可以在該方法里處理任何必要的清理工作儒搭，例如解綁定時器，取消網(wǎng)絡(luò)請求芙贫，清理任何在componentDidMount環(huán)節(jié)創(chuàng)建的DOM元素搂鲫。
}
componentDidCatch(error, info) {
// 該函數(shù)稱為錯誤邊界，捕捉發(fā)生在子組件樹中任意地方的JavaScript錯誤磺平，打印錯誤日志魂仍，并且顯示回退的用戶界面。
// Tip：錯誤邊界只捕捉樹中發(fā)生在它們之下組件里的錯誤拣挪。一個錯誤邊界并不能捕捉它自己內(nèi)部的錯誤擦酌。
}
}
1、React16新的生命周期棄用了componentWillMount菠劝、componentWillReceivePorps赊舶，componentWillUpdate
2、新增了getDerivedStateFromProps赶诊、getSnapshotBeforeUpdate來代替棄用的三個鉤子函數(shù)（componentWillMount笼平、componentWillReceivePorps，componentWillUpdate）
3甫何、React16并沒有刪除這三個鉤子函數(shù)出吹，但是不能和新增的鉤子函數(shù)（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用辙喂，React17將會刪除componentWillMount捶牢、componentWillReceivePorps，componentWillUpdate
4巍耗、新增了對錯誤的處理（componentDidCatch）
參考文章[1]：https://blog.csdn.net/qq_32899575/article/details/81699357
參考文章[2]：https://segmentfault.com/a/1190000016617400
