react生命周期

函數(shù)組件無生命周期，生命周期只有類組件才擁有

• 生命周期函數(shù)指在某一時(shí)刻組件會(huì)自動(dòng)調(diào)用并執(zhí)行的函數(shù)。
• React每個(gè)類組件都包含生命周期方法，以便于在運(yùn)行過程中特定的階段執(zhí)行這些方法。

例如：我們希望在第一次將其呈現(xiàn)到DOM時(shí)設(shè)置一個(gè)計(jì)時(shí)器Clock。這在React中稱為“安裝”。我們也想在刪除由產(chǎn)生

的DOM時(shí)清除該計(jì)時(shí)器Clock。這在React中稱為“卸載”。

一般分為：掛載、更新、卸載

常用的生命周期

不常用的生命周

完整的生命周期圖

constructor( props)

React組件的構(gòu)造函數(shù)在掛載之前被調(diào)用。在實(shí)現(xiàn)React.Component構(gòu)造函數(shù)時(shí)，需要先在添加其它內(nèi)容前，調(diào)用super(props)，用來將父組件傳來的props綁定到繼承類中。只調(diào)用一次

constructor(props) {
    // 如果你在定義組件中有定義構(gòu)造函數(shù)，則一定要調(diào)用super方法來調(diào)用父類的構(gòu)造函數(shù)
    super(props)
    // todo …
}

• 如果你定義的組件中有定義構(gòu)造函數(shù)，則在此構(gòu)造函數(shù)中一定要調(diào)用父類中的構(gòu)造方法
• 構(gòu)造函數(shù)它只執(zhí)行1次，可以進(jìn)行數(shù)據(jù)初始化操作，因?yàn)樗撬械纳芷谥械?個(gè)被執(zhí)行的方法
• 但是不太建議在此方法中進(jìn)行網(wǎng)絡(luò)請(qǐng)求
• 如果你安裝了jsx插件，則可以通過 con 按tab完成代碼自動(dòng)補(bǔ)全生成constructor

static getDerivedStateFromProps(nextProps, prevState)掛載前

此方法是react16.3之后新增，會(huì)在調(diào)用 render 方法之前調(diào)用，并且在初始掛載及后續(xù)更新時(shí)都會(huì)被調(diào)用。它應(yīng)返回一個(gè)對(duì)象來更新 state，如果返回 null 則不更新任何內(nèi)容。

此方法適用于罕見的用例，即當(dāng)前組件的 state 的值在任何時(shí)候都取決于 props傳入。

• 執(zhí)行產(chǎn)生副作用函數(shù)
• 執(zhí)行N次
• 此方法它是一個(gè)靜態(tài)方法，靜態(tài)方法中不能使用this
• 此方法必須要有返回值，{}|null , 使用此方法一定要先定義好state，否則報(bào)錯(cuò)
• 如果返回為對(duì)象，則會(huì)對(duì)state中數(shù)據(jù)進(jìn)行操作，對(duì)象屬性如果在state中沒有則添加，有則修改

如果你想用此方法,把props中的屬性數(shù)據(jù),追加到state中,后續(xù)能修改,則這樣的操作,你要確保只執(zhí)行1次

state+props合并后和原state中的數(shù)據(jù)個(gè)數(shù)一樣,在第1次手動(dòng)添加一個(gè)標(biāo)識(shí)

• 如果返回為null,則不會(huì)對(duì)state進(jìn)行任何操作

參數(shù)1：nextProps: 當(dāng)前最新的props數(shù)據(jù)

參數(shù)2：nextState:當(dāng)前最新的state數(shù)據(jù),暫時(shí)不包含你返回值中要對(duì)state修改的值

快捷輸入 gdsfp

state = {
    num: 0
};
render() {
    return <div>當(dāng)前的num是{this.state.num}</div>;
}
// 從props中獲取數(shù)據(jù)，綁定到當(dāng)前的這個(gè)組件中的state
// nextProps 父組件傳遞過來的整個(gè)props對(duì)象
// prevState 當(dāng)前組件中的狀態(tài)對(duì)象state
static getDerivedStateFromProps(nextProps, prevState) { 
     // 不需要更新當(dāng)前state
     return null 
}

render()渲染

render()方法是必需的，它主要負(fù)責(zé)組件的渲染，會(huì)被重復(fù)調(diào)用若干次

componentDidMount()掛載

它會(huì)在組件掛載后（插入 DOM 樹中）立即調(diào)用。依賴于 DOM 節(jié)點(diǎn)的初始化應(yīng)該放在這里。如需通過網(wǎng)絡(luò)請(qǐng)求獲取數(shù)據(jù)，此處是實(shí)例化請(qǐng)求的好地方。

• 它只執(zhí)行1次
• 虛擬dom掛載到真實(shí)的頁面點(diǎn)中完成,在此進(jìn)行dom操作
• 在此可以進(jìn)行網(wǎng)絡(luò)請(qǐng)求

  componentDidMount() {
    console.log('child -- componentDidMount')
  }

getSnapshotBeforeUpdate(prevProps, prevState)更新時(shí)

• prevProps 修改之前的props數(shù)據(jù)
• prevState 修改之前的state數(shù)據(jù)
• 此方法要有一個(gè)返回值,且如果有此方法,則必須要有componentDidUpdate
• 此方法的返回值,會(huì)在componentDidUpdate參數(shù)3中接受

getSnapshotBeforeUpdate(prevProps, prevState) {
	console.log('child --- getSnapshotBeforeUpdate')
	return 100
}

mponentDidUpdate(prevProps, prevState, snapshot)更新完畢

componentDidUpdate(prevProps, prevState, snapshot) {
	console.log('child --- getSnapshotBeforeUpdate', snapshot)
}

componentWillUnmount()銷毀組件

// 銷毀組件時(shí)執(zhí)行
componentWillUnmount(){
	console.log('child --- componentWillUnmount')
}

繼承PureComponent類組件

• 它可以對(duì)于組件無效渲染起到一定的優(yōu)化,但是它只能針對(duì)于props中值為基本類型
• 可以使用生命周期中提供的優(yōu)化方案,提升無效渲染次數(shù)

shouldComponentUpdate(nextProps, nextState)優(yōu)化更新周期鉤子函數(shù)

• 此方法必須要有一個(gè)boolean返回值
• 此方法只有在更新時(shí)才會(huì)觸發(fā)
• true 則繼續(xù)向下渲染 render
• false 表示當(dāng)前不會(huì)繼續(xù)渲染,從而減少無用渲染,提升性能
• nextProps 最新的props數(shù)據(jù)
• this.props 之前的props數(shù)據(jù)
• nextState 最新的state數(shù)據(jù)
• this.state 之前的state數(shù)據(jù)
• 只做淺層次的數(shù)據(jù)比對(duì)

shouldComponentUpdate(nextProps, nextState) {
	console.log(this.props, nextProps)
// 針對(duì)于要比較的字段進(jìn)行判斷
	if (this.props.num.data === nextProps.num.data) {
		return false
	}
	return true
}

深層次用這個(gè)lodash提供的方法

深層比對(duì),它比對(duì)的是對(duì)象中屬性的值,如果全局的值一樣則為true,否則為false:_.isEqual(this.props, nextProps)

shouldComponentUpdate(nextProps, nextState) {
	return !_.isEqual(this.props, nextProps)
}

當(dāng) props 或 state 發(fā)生變化時(shí)，shouldComponentUpdate() 會(huì)在渲染執(zhí)行之前被調(diào)用。返回值默認(rèn)為 true則組件繼續(xù)渲染，為false則當(dāng)前組件不會(huì)渲染。首次渲染或使用 forceUpdate() 時(shí)不會(huì)調(diào)用該方法。此方法僅作為性能優(yōu)化的方式而存在。你也可以考慮使用內(nèi)置的 PureComponent 組件，而不是手動(dòng)編寫 shouldComponentUpdate()。PureComponent 會(huì)對(duì) props 和 state 進(jìn)行淺層比較，并減少了跳過必要更新的可能性。

當(dāng)this.setState()修改了state中的數(shù)據(jù)后，當(dāng)前組件將重新渲染，同時(shí)也會(huì)重新渲染子組件，但只會(huì)渲染當(dāng)前組件子樹（當(dāng)前組件以其所有子組件）

到此這篇關(guān)于React中的生命周期詳解的文章就介紹到這了,更多相關(guān)React生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論