簡述React的生命週期

雲中景發表於2018-12-26
React

React生命週期

同Vue一樣React也有自己的生命週期，在官方給出的說明中主要分為三大類Mount（裝載）、更新（Update）以及移除（Unmount）三個主要生命週期。

  • Mount主要分為constructor、componentWillMount、render以及componentDidMount，
  • Update主要分為componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render以及componentDidUpdate
  • Unmount主要分為componentWillUnMount

一、Mount

1.constructor

初始化state，也可以新增bind一類的方法。

constructor(props) {
    super(props)//此處super（）必須存在，否者瀏覽器會報錯
    this.state = {
        data: new Data()    
        ……
    }
    ……
} 
複製程式碼

2.componentWillMount

在16版本之前可以直接使用componentWillMount()，在17及17以後版本改為UNSAFE_componentWillMount()。 componentWillMount() 元件將要Mount，但還未進行Mount。這裡是惟一一個可以直接同步修改state並且在頁面正確渲染的地方。可能不止執行一次，但很多人認為是隻執行一次，所以很多人想在這個地方做ajax請求，但官方表示將會廢棄。

3.render

構建虛擬DOM

4.componentDidMount

在這裡獲取到真實的DOM，如果要使用第三方的dom框架，應該在這裡去初始化，React裡一般都在這裡做ajax，componentDidMount只會執行一次，有資料返回後去setState，將會執行到update階段。

二、Update

1.componentWillReceiveProps(針對props有改變)

在16版本之前可以直接使用componentWillReceiveProps()，在17及17以後版本改為UNSAFE_componentWillReceiveProps()。 如果在constructor裡面，有通過props來生成state,這裡也得做同樣的操作。在這裡的this.props還是原來的。

2.shouldComponentUpdate（官方說明中唯一優化React的地方）

shouldComponentUpdate(nextProps, nextState)惟一一個做react效能優化的生命週期，必須! 返回一個布林值。 如果是false，就不會再往下執行。

一般會根據nextProp VS this.props 或者 nextState VS this.state去判斷返回true還是false。

shouldComponentUpdate

3.componentWillUpdate

在16版本之前可以直接使用componentWillUpdate()，在17及17以後版本改為UNSAFE_componentWillUpdate()。

4.componentDidUpdate

componentDidUpdate()真實的dom已經更新到頁面上

三、Unmount

1.componentWillUnMount

在componentWillUnMount（）中去清空定時器一類的東西。

四、新增生命週期

static getDerivedStateFromProps(props, state)

static getDerivedStateFromProps(props, state) {
  在這裡沒有this
  需要return 一個物件
}
複製程式碼

不管是mount還是update階段都會執行

五、舊版本

在早期（16及1以前6版本）使用createClass（）可以得到兩個週期。

createClass({
    這裡面可以有getDefaultProps（新版裡直接在class裡寫static defaultProps = {}）和getInitialState(新版直接在constructor裡寫this.state={}或者直接在class裡寫 state ={})兩個生命週期
  })
複製程式碼

createClass

相關文章