以下的內容根據尚硅谷整理。

舊生命鉤子

輔助理解：

• 紅色框：掛載時生命鉤子
• 藍色框：更新時生命鉤子
• 綠色框：卸載時生命鉤子

掛載時

如圖所示，我們可以看到，在組件第一次掛載時會經歷：
構造器（constructor）=》組件將要掛載（componentWillMount）=》組件掛載渲染（render）=》組件掛載完成（componentDidMount）。

更新時

有三條路徑可以被觸發，分別是紅色、橙色和粉色。

組件內部狀態更新：
路徑2：組件是否應該更新（shouldComponentUpdate）=》組件將要更新（componentWillUpdate）=》組件更新渲染（render）=》組件更新完成（componentDidUpdate）。

• shouldComponentUpdate，未顯性聲明時默認返回ture，返回false時組件無法進行更新操作。也就無法執行××××××××》組件將要更新（componentWillUpdate）=》組件更新渲染（render）=》組件更新完成。

shouldComponentUpdate(){return false;
}

強制更新：
路徑3：我們可以調用this.forceUpdate()實現強制更新，這個api和setState一樣都是React自帶的，一般這個強制更新很少用。
組件將要更新（componentWillUpdate）=》組件更新渲染（render）=》組件更新完成（componentDidUpdate）。

父組件重新render：
路徑1:在父組件執行完render()之后會被觸發。還記得嗎？我們藍色的區域是更新的生命鉤子，也就是說第一次render()的時候不算，第二次及之后才會被觸發。(componentWillReceiveProps）

import React, { Component } from 'react'export default class A extends Component {state={car:'奧迪'}changeCar= () => {this.setState({car:'奔馳'})}render() {return (<div><div>我是組件A</div><button onClick={this.changeCar}>換車</button><B car={this.state.car}/></div>)}
}class B extends Component {//首次渲染不會被觸發componentWillReceiveProps(){console.log('componentWillReceiveProps')}render() {return (<div>我是組件B,我接收到的車是：{this.props.car}</div>)}
}

舊生命鉤子的總結

新生命鉤子

當你充分理解舊的生命鉤子之后，看下面這張圖對你來說應該易如反掌。大體來說用來劃分的區塊方式一致，即：創建時、更新時【三條路徑】、卸載時。

getDerivedSateFromProps

直譯：從props哪里獲得的派生的State

1.
state ={name:'佛系努力中……'}
//注意點1：需聲明為類的靜態方法《static》
static getDerivedStateFormProps(props,state){//可以讀取到props,state//注意點2：必須return一個state對象或者nullreturn {name:'哈哈哈'} //或者null
}
最后，this.state.name將會被渲染成‘哈哈哈’,直接更改了state的值，且任何操作不會改變該值。

2.
state ={name:'佛系努力中……'}
static getDerivedStateFormProps(props,state){return null
}
如果return null 功能將不會受到影響

3.此方法使用于state的值在任何時候取決于porps
state ={name:'佛系努力中……'}
static getDerivedStateFormProps((props,state){return props
}

總結：這個生命周期鉤子會被用到情況很少，并且建議盡量避免使用，防止導致代碼冗余，并使組件難以維護。

getSnapshotBeforeUpdate

//在更新之前獲得一個快照
getSnapshotBeforeUpdate(prevProps,prevState){console.log("getSnapshotBeforeUpdate--",prevProps,prevState)return '一只小貓'
}

componentDidUpdate

//組件以及更新完畢，接收三個值，最后一個snapShot，即為getSnapshotBeforeUpdate返回值
componentDidUpdate(prevProps,prevState,snapShot){console.log("componentDidUpdate--",prevProps,prevState,snapShot)}

一個應用場景
總結：這個東西實際應用場景也很少，嘿嘿！