React元件生命週期一覽
阿新 • • 發佈:2019-02-12
React元件生命週期有三個階段:載入、更新和解除安裝。每個階段有多個方法來呼叫實現某些功能。這些方法名字也很有意思,帶will字首表示在該階段發生之前呼叫,did表示在該階段發生之後呼叫。本文將介紹這些方法。本文翻譯自React官網文件,如有翻譯不當,請不吝指正。
1. Mounting階段:該階段表示一個元件例項被建立並被插入到DOM中。該階段有四個方法:constructor()
,componentWillMount()
,render()
和componentDidMount()
。
- constructor(props):該方法在元件載入前呼叫。當元件作為
React.Component
super(props)
。否則,this.props
在構造器中會是undefined,這會導致程式碼出現bug。
作用:用來初始化狀態,如果既不初始化狀態也不繫結方法,那就沒必要實現該方法了。(筆者注:事實上,如果元件沒有構造器方法的話,元件會預設呼叫一個構造器,實現屬性的傳遞)。 - componentWillMount():該方法會在載入發生前呼叫。因為它發生在
render()
方法前,因此在該方法內同步設定狀態不會引發重渲染。該方法還是伺服器端渲染的唯一的生命週期鉤子。一般,推薦用constructor()
代替該方法。 - render():該方法必須要有。當呼叫時,它會檢查
this.props
this.state
,然後返回一個React元素。這個元素可以是原生DOM元件如div,也可以是一個自定義的複合元件。如果什麼也不想渲染的話,可以返回null
或false
。當返回null
或false
時,ReactDOM.findDOMNode(this)
會返回null
。該方法應該是純淨的,這意味著它不能修改元件狀態,每次呼叫會返回相同的結果,不會和瀏覽器發生直接的互動。如果想要同瀏覽器發生互動的話,應該在componentDidMount()
中實現。 - componentDidMount():元件載入完成後觸發。
作用:放置必要的DOM節點。如果要從遠端節點載入資料,這是一個不錯的例項化網路請求的地方。也可以在此處設定定時器等。
注意:在該方法內設定狀態會導致重渲染。
2. Updating階段:該階段表示由狀態或屬性的改變導致元件的重渲染。該階段有五個方法:componentWillReceiveProps()
,shouldComponentUpdate()
,componentWillUpdate()
,render()
和componentDidUpdate()
。
- componentWillReceiveProps(nextProps):該方法會在載入好的元件在收到新的狀態後呼叫。如果需要更新狀態以反映屬性的改變,可以在比較
this.props
和nextProps
後,使用this.setState()
方法來實現狀態的過渡。
注意:React可能會在props值並未改變的時候呼叫該方法,所以要確保每次處理改變時都要比較當前props和收到的props值。這可能發生在父元件導致該元件重渲染時。
非觸發時期:mounting階段不會呼叫該方法。只有在部分props屬性更新時呼叫該方法,另外呼叫this.state()
不會觸發該方法。 - shouldComponentUpdate(nextProps, nextState):該方法用來告訴React,元件輸出是否受到當前狀態或屬性的影響。預設情況下,每次狀態改變都會導致重渲染,在大多數情況下,你只需保持該預設行為即可。該方法在收到新的props或state時會被呼叫,且呼叫是在重渲染前。該方法預設返回
true
。但返回false
不會影響其子元件在狀態改變時的重渲染。
非觸發時期:初次渲染或使用forceUpdate()
時不會呼叫該方法。
注意:就目前而言,如果該方法返回false
,以後的componentWillUpdate()
,render()
和componentDidUpdate()
都不會再呼叫了。但未來可能該方法返回的結果只是作為暗示,而非指令,返回false
可能仍會導致重新渲染。
最後,如果找到了導致效能低下的元件,可以使它繼承React.PureComponent
。該元件用props和state的淺比較實現了shouldComponentUpdate()
。也可以自己實現該方法,通過this.props
同nextProps
比較,this.state
同nextState
比較,然後返回false
以跳過更新。 - componentWillUpdate():該方法在收到新屬性和狀態渲染前呼叫。可以用它來做更新前的準備工作。
注意:該方法不可以呼叫this.setState()。如果需要更新狀態以響應屬性的改變,使用componentWillReceiveProps(nextProps)
代替。
非觸發時期:初次渲染不會呼叫該方法。shouldComponentUpdate()
返回false不會呼叫該方法。 - render():該方法是mount和update階段都會使用到的方法,解釋同mount階段的
render()
。
非觸發時期:shouldComponentUpdate()
返回false不會呼叫該方法。 - componentDidUpdate(prevProps, prevState):更新發生後會立即呼叫該方法。可用來在元件更新後操作DOM。另外,也可以通過比較當前屬性和之前屬性來決定是否傳送網路請求(如,狀態未改變不需要做網路請求)。
非觸發時期:初次渲染不會呼叫該方法。shouldComponentUpdate()
返回false不會呼叫該方法。
3. Unmounting階段:該階段表示元件將從DOM中移除。該階段只有一個方法:componentWillUnmount()
。
- componentWillUnmount():該方法會在元件被銷燬前立即呼叫。
作用:可以在方法內實現一些清理工作,如清除定時器,取消網路請求或者是清理其他在componentDidMount()
方法內建立的DOM元素。