React 生命週期

前言

學習React,生命週期很重要,我們瞭解完生命週期的各個組件,對寫高性能組件會有很大的幫助.

Ract生命週期

React 生命週期分爲三種狀態 1. 初始化 2.更新 3.銷燬

  • 初始化

1、getDefaultProps()

設置默認的props,也可以用dufaultProps設置組件的默認屬性.

2、getInitialState()

在使用es6的class語法時是沒有這個鉤子函數的,可以直接在constructor中定義this.state。此時可以訪問this.props

3、componentWillMount()

組件初始化時只調用,以後組件更新不調用,整個生命週期只調用一次,此時可以修改state。

4、 render()

react最重要的步驟,創建虛擬dom,進行diff算法,更新dom樹都在此進行。此時就不能更改state了。

5、componentDidMount()

組件渲染之後調用,只調用一次。

  • 更新

6、componentWillReceiveProps(nextProps)

組件初始化時不調用,組件接受新的props時調用。

7、shouldComponentUpdate(nextProps, nextState)

react性能優化非常重要的一環。組件接受新的state或者props時調用,我們可以設置在此對比前後兩個props和state是否相同,如果相同則返回false阻止更新,因爲相同的屬性狀態一定會生成相同的dom樹,這樣就不需要創造新的dom樹和舊的dom樹進行diff算法對比,節省大量性能,尤其是在dom結構複雜的時候

8、componentWillUpdata(nextProps, nextState)

組件初始化時不調用,只有在組件將要更新時才調用,此時可以修改state

9、render()

組件渲染

10、componentDidUpdate()

組件初始化時不調用,組件更新完成後調用,此時可以獲取dom節點。

  • 卸載

11、componentWillUnmount()

組件將要卸載時調用,一些事件監聽和定時器需要在此時清除。

結束語

以上就是React 的生命週期,大家可以自行寫下code測試一下,在這裏我就不貼code 了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章