組件生命周期
掛載
當(dāng)組件實(shí)例被創(chuàng)建并插入 DOM 中時(shí)，其生命周期調(diào)用順序如下：
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
注意：下述生命周期方法即將過(guò)時(shí)腿短，應(yīng)避免使用它們：
- componentWillMount()
更新
當(dāng)組件的 props 或 state 發(fā)生變化時(shí)會(huì)觸發(fā)更新痹筛。組件更新的生命周期調(diào)用順序如下：
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
注意：下述生命周期方法即將過(guò)時(shí)纳账，應(yīng)避免使用它們：
- componentWillUpdate()
- componentWillReceiveProps()
卸載
當(dāng)組件從 DOM 中移除時(shí)會(huì)調(diào)用如下方法：
- componentWillUnmount()
錯(cuò)誤處理
當(dāng)渲染過(guò)程歹撒，生命周期榨呆，或子組件的構(gòu)造函數(shù)中拋出錯(cuò)誤時(shí)荒给，會(huì)調(diào)用如下方法：
- static getDerivedStateFromError()
- componentDidCatch()
常用的生命周期方法
render()
render() 函數(shù)應(yīng)該為純函數(shù)倦炒，這意味著在不修改組件 state 的情況下显沈，每次調(diào)用時(shí)都返回相同的結(jié)果，并且它不會(huì)直接與瀏覽器交互逢唤。
如需與瀏覽器進(jìn)行交互拉讯，需在 componentDidMount() 或其他生命周期方法中執(zhí)行你的操作，保持 render() 為純函數(shù)鳖藕。
注意：如果 shouldComponentUpdate() 返回 false魔慷，則不會(huì)調(diào)用 render()
constructor()
constructor(props)
如果不初始化 state 或不進(jìn)行方法綁定則不需要為 React 組件實(shí)現(xiàn)構(gòu)造函數(shù)。
通常著恩，在 React 中院尔，構(gòu)造蛤?qū)賰H用于以下兩種情況：
- 通過(guò)給 this.state 復(fù)制對(duì)象來(lái)初始化內(nèi)部state
- 為事件處理函數(shù)綁定實(shí)例
要避免在構(gòu)造函數(shù)中引入任何副作用或訂閱。如有需要喉誊，應(yīng)在 componentDidMount() 中進(jìn)行操作邀摆。
componentDidMount()
componentDidMount() 會(huì)在組件掛載后（插入 DOM 樹(shù)中）立即調(diào)用。此處是網(wǎng)絡(luò)請(qǐng)求獲取數(shù)據(jù)的好地方伍茄。
如果在此處添加了訂閱栋盹，不要忘記在 componentWillUnmount() 里取消訂閱。
componentDidUpdate()
constructor(preProps, prevState, snapshot)
componentDidUpdate() 會(huì)在更新后被立即調(diào)用敷矫。首次渲染不會(huì)執(zhí)行此方法例获。
當(dāng)組件更新后，可以在此處對(duì) DOM 進(jìn)行操作曹仗。如果你對(duì)更新后的 props 進(jìn)行了比較榨汤，也可以選擇在此處進(jìn)行網(wǎng)絡(luò)請(qǐng)求。（例如整葡，當(dāng) props未發(fā)生變化時(shí)件余，則不會(huì)執(zhí)行網(wǎng)絡(luò)請(qǐng)求）
componentDidUpdate(prevProps) {
// 典型用法（不要忘記比較 props）
if(this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID)
}
}
如果組件實(shí)現(xiàn)了 getSnapshotBeforeUpdate() 生命周期（不常用），則它的返回值將作為 componentDidUpdate() 的第三個(gè)參數(shù) "snapshot" 參數(shù)傳遞。否則此參數(shù)將為 undefined啼器。
注意：如果 shouldComponentUpdate() 返回值為 false旬渠，則不會(huì)調(diào)用 componentDidUpdate()。
componentWillUnmount()
componentWillUnmount() 會(huì)在組件卸載及銷(xiāo)毀之前直接調(diào)用端壳。在此方法中執(zhí)行必要的清理操作告丢，例如，清除 timer损谦，取消網(wǎng)絡(luò)請(qǐng)求或清除在 componentDidMount() 中創(chuàng)建的訂閱等岖免。
componentWillUnmount() 中不應(yīng)調(diào)用 setState(), 因?yàn)樵摻M件將永遠(yuǎn)不會(huì)重新渲染。組件實(shí)例卸載后照捡，將永遠(yuǎn)不會(huì)再掛載它颅湘。
不常用的生命周期方法
shouldComponentUpdate()
shouldComponentUpdate(nextProps, prevState)
此方法僅作為性能優(yōu)化的方式而存在。當(dāng) props 或 state 發(fā)生變化時(shí)栗精，shouldComponentUpdate() 會(huì)在渲染執(zhí)行之前被調(diào)用闯参。默認(rèn)返回true。首次渲染或使用 forceUpdate() 時(shí)不會(huì)調(diào)用該方法悲立。
static getDerivedStateFromProps()
static getDerivedStateFromProps(props, state)
getDerivedStateFromProps 會(huì)在調(diào)用 render 方法之前調(diào)用鹿寨，并且在初試掛載及后續(xù)更新時(shí)都會(huì)被調(diào)用。它應(yīng)返回一個(gè)對(duì)象來(lái)更新 state薪夕，如果返回 null 則不更新任何內(nèi)容脚草。
此方法適用于 state 的值在任何時(shí)候都取決于 props。
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate() 在最近一次渲染輸出（提交到 DOM 節(jié)點(diǎn)）之前調(diào)用原献。它使得組件能在發(fā)生更改之前從 DOM 中捕獲一些信息（例如馏慨，滾動(dòng)位置）。此聲明周期的任何返回值都將作為參數(shù)傳遞給 componentDidUpdate()
static getDerivedStateFromError()
static getDerivedStateFromError(error)
此生命周期會(huì)在后代組件拋出錯(cuò)誤后被調(diào)用嚼贡。它將拋出的錯(cuò)位作為參數(shù)熏纯，并返回一個(gè)值以更新 state，讓組件捕獲樹(shù)中未處理的 JavaScript 錯(cuò)誤并展示降級(jí) UI粤策。
componentDidCatch(error, info)
此生命周期在后代組件拋出錯(cuò)誤后被調(diào)用樟澜。它接收兩個(gè)參數(shù)：
- error - 拋出的錯(cuò)誤
- info - 帶有 componentStack key 的對(duì)象，其中包含有關(guān)組件引發(fā)錯(cuò)誤的棧信息叮盘。
componentDidCatch() 會(huì)在"提交"階段被調(diào)用秩贰，因此允許執(zhí)行副作用。
過(guò)時(shí)的生命周期方法
這些方法仍然有效柔吼，但是不建議在新代碼中使用它們毒费。
- componentWillMount()
- componentWillReceiveProps()
- componentWillUpdate()
