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中沒有則添加，有則修改
- 如果你想用此方法,把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,) {
// 不需要更新目前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,) {
console.log('child --- getSnapshotBeforeUpdate')
return 100
} mponentDidUpdate(prevProps, prevState, snapshot)更新完畢
componentDidUpdate(prevProps, prevState,) {
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,) {
console.log(this.props, nextProps)
// 針對于要比較的字段進行判斷
if (this.props.num.data === nextProps.num.data) {
return false
}
return true
} shouldComponentUpdate(nextProps,) {
return !_.isEqual(this.props, nextProps)
}