react生命周期

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

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

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

的DOM時清除該計時器Clock。這在React中稱為“卸載”。

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

常用的生命周期

不常用的生命周

完整的生命周期圖

constructor( props)

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

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

• 如果你定義的組件中有定義構造函數(shù)，則在此構造函數(shù)中一定要調(diào)用父類中的構造方法
• 構造函數(shù)它只執(zhí)行1次，可以進行數(shù)據(jù)初始化操作，因為它是所有的生命周期中第1個被執(zhí)行的方法
• 但是不太建議在此方法中進行網(wǎng)絡請求
• 如果你安裝了jsx插件，則可以通過 con 按tab完成代碼自動補全生成constructor

static getDerivedStateFromProps(nextProps, prevState)掛載前

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

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

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

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

state+props合并后和原state中的數(shù)據(jù)個數(shù)一樣,在第1次手動添加一個標識

• 如果返回為null,則不會對state進行任何操作

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

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

快捷輸入 gdsfp

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

render()渲染

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

componentDidMount()掛載

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

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

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

getSnapshotBeforeUpdate(prevProps, prevState)更新時

• prevProps 修改之前的props數(shù)據(jù)
• prevState 修改之前的state數(shù)據(jù)
• 此方法要有一個返回值,且如果有此方法,則必須要有componentDidUpdate
• 此方法的返回值,會在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()銷毀組件

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

繼承PureComponent類組件

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

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

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

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

深層次用這個lodash提供的方法

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

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

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

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

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

最新評論