react生命周期

函數組件無生命周期，生命周期只有類組件才擁有

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

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

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

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

常用的生命周期

不常用的生命周

完整的生命周期圖

constructor(?props)

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

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

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

static getDerivedStateFromProps(nextProps, prevState)掛載前

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

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

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

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

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

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

參數1：nextProps: 當前最新的props數據

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

快捷輸入 gdsfp

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

render()渲染

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

componentDidMount()掛載

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

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

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

getSnapshotBeforeUpdate(prevProps, prevState)更新時

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

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

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

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

componentWillUnmount()銷毀組件

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

繼承PureComponent類組件

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

shouldComponentUpdate(nextProps, nextState)優化更新周期鉤子函數

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

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 發生變化時，shouldComponentUpdate() 會在渲染執行之前被調用。返回值默認為 true則組件繼續渲染，為false則當前組件不會渲染。首次渲染或使用 forceUpdate() 時不會調用該方法。此方法僅作為性能優化的方式而存在。你也可以考慮使用內置的 PureComponent 組件，而不是手動編寫 shouldComponentUpdate()。PureComponent 會對 props 和 state 進行淺層比較，并減少了跳過必要更新的可能性。

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