前言
最近有點(diǎn)小忙。
一、React生命周期的概念
和Vue一樣，在React組件創(chuàng)建、更新，銷(xiāo)毀的過(guò)程中伴隨的各種各樣的函數(shù)執(zhí)行。這些在組件特定的時(shí)期，被觸發(fā)的函數(shù)，統(tǒng)稱(chēng)為組件的生命周期函數(shù)。
二、React生命周期
組件的生命周期可以分為三個(gè)階段，我們也從這三個(gè)階段依次介紹：
2.1 組件安裝（Mounting）階段
在創(chuàng)建組件實(shí)例并將其插入DOM時(shí)，將按以下順序調(diào)用這些方法：
- constructor()
- static getDerivedStateFromProps() （react16版本后新增）
- render()
- componentDidMount()
constructor()構(gòu)造函數(shù)
主要干兩件事
- 將對(duì)象分配給state來(lái)初始化本地狀態(tài)。
- 將事件處理程序方法綁定到實(shí)例上。
constructor(props) {
super(props);
// Don't call this.setState() here!
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}
static getDerivedStateFromProps() 函數(shù)
這是React新增的生命周期函數(shù)，它的作用是根據(jù)props來(lái)派生出新的state。
static getDerivedStateFromProps(props, state) {
console.log(props)
return props
}
接受兩個(gè)參數(shù)：組件的props和此刻的狀態(tài)state，返回一個(gè)對(duì)象以更新?tīng)顟B(tài)，注意這個(gè)對(duì)象會(huì)和原來(lái)的state合并（相同的會(huì)替代，和 this.setState() 道理一樣），也可以返回一個(gè) null 表示什么都不更新。
Render()函數(shù)
該render()函數(shù)是個(gè)純函數(shù)，主要負(fù)責(zé)返回React元素。
render()如果shouldComponentUpdate()返回false，將不會(huì)被調(diào)用。
componentDidMount()函數(shù)
componentDidMount()掛載組件（插入樹(shù)中）后立即調(diào)用。需要DOM節(jié)點(diǎn)的初始化應(yīng)在此處進(jìn)行。一般也用來(lái)做兩件事：
1、網(wǎng)絡(luò)數(shù)據(jù)接口請(qǐng)求的好地方。
2、添加一些事件訂閱（當(dāng)然別忘了在componentWillUnmount()中取消訂閱）
2.2 組件更新（Updating）階段
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
shouldComponentUpdate(nextProps, nextState)函數(shù)
在組件更新的時(shí)候觸發(fā)，此方法僅作為性能優(yōu)化存在，如果shouldComponentUpdate()返回false，然后componentWillUpdate()，render()和componentDidUpdate()將不會(huì)被調(diào)用。以下是代碼通過(guò)下一次參數(shù)是否改變來(lái)判斷組件是否重新渲染（執(zhí)行render函數(shù)）
// 判斷組件 props是否更新
shouldComponentUpdate(nextProps, nextStates){
return nextProps.content !== this.props.content
}
getSnapshotBeforeUpdate(prevProps, prevState)函數(shù)
getSnapshotBeforeUpdate()在將最新呈現(xiàn)的輸出提交給DOM之前，立即調(diào)用（也就是說(shuō)我的state已經(jīng)更新了，但是還沒(méi)有render，我可以在這里獲取更新以前的一些DOM的信息）。它使您的組件可以在DOM可能發(fā)生更改之前從DOM中捕獲一些信息（例如，滾動(dòng)位置）。此生命周期方法返回的任何值都將作為參數(shù)傳遞給componentDidUpdate()。
componentDidUpdate(prevProps, prevState, snapshot)函數(shù)
componentDidUpdate()發(fā)生更新后立即調(diào)用，初始渲染不調(diào)用此方法。snapshot 參數(shù)就是getSnapshotBeforeUpdate(prevProps, prevState)函數(shù)返回的參數(shù)。
componentDidUpdate()如果shouldComponentUpdate()返回false，將不會(huì)被調(diào)用。
2.3 組件卸載（Unmounting）階段
組件卸載階段執(zhí)行的函數(shù)一般只有componentWillUnmount()
componentWillUnmount()
componentWillUnmount() 在卸載和銷(xiāo)毀組件之前立即調(diào)用。使用此方法執(zhí)行任何必要的清除，例如使計(jì)時(shí)器無(wú)效，取消網(wǎng)絡(luò)請(qǐng)求或清除在 componentDidMount() 中創(chuàng)建的所有訂閱。
三、總結(jié)
這里只介紹了React主要的一些生命周期函數(shù)，有些官方不推薦使用或者將要廢除的幾個(gè)就沒(méi)有介紹了?？偟膩?lái)說(shuō)只要記住這幾個(gè)比較重要的就行了，清楚每個(gè)這幾個(gè)生命周期函數(shù)是用來(lái)干嘛的，解決了什么問(wèn)題。
