React 入門學習筆記整理(七)—— 生命週期
(1)react 生命週期
只有類元件有生命週期,函式元件沒有生命週期
1、掛載階段:這些方法會在元件例項被建立和插入DOM中時被呼叫:
1)constructor(props)
初始化元件的狀態、繫結方法,可以在建構函式中完成。
注意:狀態不會隨著屬性的更新而更新。為了保證屬性和狀態同步,通常需要狀態提升。
2) static getDerivedStateFromProps(nextProps, prevState)
元件例項化和接收新屬性時將會getDerivedStateFromProps。它應該返回一個物件來更新狀態,或者返回null來表明新屬性不需要更新任何狀態。
注意:
3)componentWillMount()
在元件掛載到DOM前呼叫,且只會被呼叫一次,在這邊呼叫this.setState不會引起元件重新渲染,也可以把寫在這邊的內容提前到constructor()中,所以專案中很少用。
4)render()
5)componentDidMount()
元件掛載到DOM之後執行,且只會被呼叫一次。
在這個方法中呼叫setState()將會觸發一次額外的渲染,但是它將在瀏覽器重新整理螢幕之前發生。這保證了即使render()將會呼叫兩次,但使用者不會看到中間狀態。謹慎使用這一模式,因為它常導致效能問題。然而,它對於像模態框和工具提示框這樣的例子是必須的。這時,在渲染依賴DOM節點的尺寸或者位置的檢視前,你需要先測量這些節點。
2、更新階段:屬性或狀態的改變會觸發一次更新
1)componentWillReceiveProps(nextProps)
在裝載的元件接收到新屬性前呼叫
若你需要更新狀態響應屬性改變(例如,重置它),可能你需對比this.props狀語從句:nextProps並在該方法中使用this.setState()處理狀態改變。
注意即使屬性未有任何改變,可能也會呼叫該方法,因此若你想要處理改變,請確保比較當前和之後的值。這可能會發生在當父元件引起你的元件重新渲染。
2) static getDerivedStateFromProps()
3)shouldComponentUpdate(nextProps, nextState)
當接收到新屬性或狀態時,shouldComponentUpdate()在渲染前被呼叫。預設為true。方法該不會並在初始化渲染或當使用forceUpdate()時被呼叫。
當前,若shouldComponentUpdate()返回false,而後componentWillUpdate(),render()和componentDidUpdate()將不會被呼叫
4)componentWillUpdate(nextProps, nextState)
當接收到新屬性或狀態時,componentWillUpdate會在渲染前被呼叫。
注意:不能再這裡呼叫this.State(),若你需要更新狀態響應屬性的調整,使用getDerivedStateFromProps()代替。
若shouldComponentUpdate()返回false,componentWillUpdate將不會被呼叫。
5)render()
6)getSnapshotBeforeUpdate()
在最新的渲染輸出提交給DOM前將會立即呼叫。它讓你的元件能在當前的值可能要改變前獲得它們,這一生命週期返回的任何職將會作為引數被傳遞給componentDidUpdate()
7)componentDidUpdate()
該方法會在更新發生後立即被呼叫。初始化時不會渲染。
當元件被更新時,使用該方法是操作DOM的一次機會。這也是一個適合傳送請求的地方,要是你對比了當前屬性和之前屬性(例如,如果屬性沒有改變那麼請求也就沒必要了)。
注意:若shouldComponentUpdate()返回false,componentDidUpdate()將不會被呼叫。
3、銷燬階段
1)componentWillUnmount()
componentWillUnmount()在元件被解除安裝和銷燬之前立刻呼叫。可以在該方法裡處理任何必要的清理工作,例如解繫結時器,取消網路請求,清理任何在componentDidMount環節建立的DOM元素。
2)componentDidCatch(error, info)
錯誤邊界是React元件,並不是損壞的元件樹。錯誤邊界捕捉髮生在子元件樹中任意地方的JavaScript錯誤,列印錯誤日誌,並且顯示回退的使用者介面。錯誤邊界捕捉渲染期間、在生命週期方法中和在它們之下整棵樹的建構函式中的錯誤。
如果定義了這一生命週期方法,一個類元件將成為一個錯誤邊界。在錯誤邊界中呼叫setState()讓你捕捉當前樹之下未處理的JavaScript錯誤,並顯示回退的使用者介面。只使用錯誤邊界來恢復異常,而不要嘗試將它們用於控制流。
(2)基於回撥的元件交流
import React, { Component } from 'react';
function Send(props){
return (
<div>
<button onClick={props.changeMsg}>傳送訊息</button>
</div>
)
}
function Receive(props){
return (
<div>
<p style={{display:'inline-block'}}>接收訊息:</p>
<p style={{
display:'inline-block',
marginLeft:20
}}>{props.msg}</p>
</div>
)
}
function Input(props){
return (
<input type="text" ref={props.getInput}/>
)
}
class App extends Component {
constructor(props){
super(props);
this.state = {
msg:'天氣好',
sunInput:''
}
}
changeMsg=()=>{
this.setState({
//this.sunInput是獲取Input節點
msg:this.sunInput.value
})
}
render() {
return (
<div className="App">
<Input getInput={el=>this.sunInput=el} />
<Receive msg={this.state.msg}></Receive>
<Send changeMsg={this.changeMsg}></Send>
</div>
);
}
}
export default App;